爲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