为JqGrid添加分页

Question

正尝试使用某些博客中提供的示例将jQuery Grid添加到我的应用程序（C＃和Asp.net）中，能够使用由Webservice发送的Json数据。 现在已经尝试为网格添加分页并遭到攻击.Script是这样的。

<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> 

显示寻呼机股利和附但是，这不是我的工作我失去了一些东西？

感谢 塞缪尔

Answer 1

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

您使用非常旧模板为您的jqGrid。当前版本的jqGrid 4.3现已发布，您仍然使用imgpath，该版本在3.5版本中已被弃用（请参阅the documentation）。非常旧的jqGrid版本对于Web服务的调用没有很好的支持，但即使在那时，人们已经可以使用addJsonData和addXmlData方法更有效地添加数据，就像您对addRowData所做的那样。它被记录为here。

我建议你最好不要修改getData函数使用datatype: 'json'而不是datatype作为函数。例如，在the old demo中，您可以找到一个示例来说明如何实现这一点。在another answer中，您可以找到一个示例，如果您不希望在服务器上实现数据分页，而是希望将所有网格数据发送到客户端并允许jqGrid执行分页，排序和过滤，则可以使用loadonce: true参数您在客户端的数据。它只能使用相对较少的行数（例如几百行）才能有效。

修订：如果您使用SqlDataReader从数据库中获取数据，你可以构造SQL语句（SqlCommand）在其上从服务器接收的rows和page参数的基础。

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

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

其中10就应该更换到rows参数的值。要获得由参数page定义的另一个页面，您需要跳过(page-1)*rows项目并获取下一个顶部page项目。使用common table expression (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 

你应该只需更换10和20在两个地以上rows和(page-1)*rows。如果你有一些不支持公用表表达式（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