為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