为JqGrid添加分页

Question

我正在尝试使用某些博客中提供的示例将jQuery Grid添加到我的应用程序（C＃和Asp.net）中，这些示例能够使用Webservice发送的Json数据。 现在已经尝试为Grid添加分页并被删除了。脚本就是这样。

    <script type="text/javascript">
    $(function () {
        $("#table").jqGrid({
            datatype: function (pdata) { getData(pdata); },
            height: 250,
            colNames: ['ID', 'First Name', 'Last Name'],
            colModel: [
            { name: 'ID', width: 60, sortable: false },
            { name: 'FirstName', width: 200, sortable: false },
            { name: 'LastName', width: 200, sortable: false }
        ],

            imgpath: '<%= ResolveClientUrl("styles/redmon/images") %>',

            pager: jQuery('#pager'),
            rowNum: 2,
            rowList: [2, 5, 10, 50, 100, 200, 500, 1000],                
            height: "100%",
            viewrecords: true,
            scrollOffset: 0,
            caption: 'Sample'

        });
    });
    function getData(pData) {
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: '<%= ResolveClientUrl("~/WebService.asmx/GetListOfPersons") %>',
            data: '{}',
            dataType: "json",
            success: function (data, textStatus) {
                if (textStatus == "success")
                    ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function (data, textStatus) {
                alert('An error has occured retrieving data!');
            }
        });
    }
    function ReceivedClientData(data) {
        var thegrid = $("#table");
        thegrid.clearGridData();
        for (var i = 0; i < data.length; i++)
            thegrid.addRowData(i + 1, data[i]);
    }
    function getMain(dObj) {
        if (dObj.hasOwnProperty('d'))
            return dObj.d;
        else
            return dObj;
    }
</script>

... html区块

     <table id="table" cellpadding="0" cellspacing="0">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div> 

分页器div已显示并已连接，但我无法正常工作吗？

谢谢塞缪尔

Answer 1

您的主要问题是您忽略了可以转发到ASMX Web服务的getData的pData 。

您为jqGrid使用了非常旧的模板 。 当前的jqGrid版本现在为4.3，并且您仍然使用3.5版本中已弃用的imgpath （请参阅文档 ）。 很老版本的jqGrid的有用于调用Web服务没有很好的支持，但即使在当时一个已经可以使用addJsonData和addXmlData方法，以更有效地为你对于做添加数据addRowData 。 它记录在这里 。

我建议您最好不要使用datatype: 'json'来修改getData函数datatype: 'json'而不是将datatype用作函数。 例如， 在旧的演示中 ，您可以找到一个示例，该示例准确地实现了这一点。 在另一个答案中，您可以找到一个示例如何使用loadonce: true参数，以防万一，如果您不想在服务器上实现数据分页，而不是希望将所有网格数据发送到客户端并允许jqGrid进行分页，排序并在客户端为您过滤数据。 它只能在相对较少的行数（例如几百行）中有效。

UPDATED ：如果使用SqlDataReader从数据库中获取数据，则可以基于从服务器接收的rows和page参数构造SQL语句（ SqlCommand ）。

在大多数情况下，您需要查询具有唯一ID的数据。 因此，您可以使用SELECT TOP和LEFT OUTER JOIN构造实现分页。 让我在一个例子中解释它。 例如，您需要使用Northwind数据库的dbo.Products表中的价格查询Product。 要获取首页数据，您可以使用

SELECT TOP(10) ProductID, ProductName, UnitPrice FROM dbo.Products

其中10应该替换为rows参数的值。 要获取参数定义的另一个页面page ，你需要跳过(page-1)*rows项目，并获得下一个顶级page的项目。 使用通用表表达式（CTE）语法，您可以编写不同的语句：

WITH GetAll (Id,ProductName,UnitPrice) AS (
    SELECT ProductID,ProductName,UnitPrice FROM dbo.Products
), GetTop (Id,ProductName,UnitPrice) AS (
    SELECT TOP(20) * FROM GetAll
), GetNext (Id,ProductName,UnitPrice) AS (
    SELECT TOP(10) a.* FROM GetAll AS a
        LEFT OUTER JOIN GetTop AS t ON t.Id = a.Id
    WHERE t.Id IS NULL
)
SELECT * FROM GetNext

您应该只rows和(page-1)*rows上方的两个位置上替换10和20 。 如果您有一些不支持公用表表达式（CTE）的数据库，则可以就子查询重写同一查询：

SELECT TOP(10) a.* FROM (SELECT ProductID,ProductName,UnitPrice FROM dbo.Products)
        AS a LEFT OUTER JOIN
            (SELECT TOP(20) ProductID,ProductName,UnitPrice FROM dbo.Products) AS t
                ON t.ProductID = a.ProductID
WHERE t.ProductID IS NULL