为 JqGrid 添加分页 [英] Add Paging for JqGrid

问题描述

我正在尝试使用一些博客中提供的示例将 jQuery Grid 添加到我的应用程序(C# 和 Asp.net)中，能够使用 Webservice 发送的 Json 数据.现在尝试为Grid添加分页，结果被击中.脚本是这样的.

am trying to add jQuery Grid into my application(C# and Asp.net) using samples provided in some blogs, able to use Json data sent by Webservice. Now have tried to add pagination for the Grid and got strucked.Script is like this.

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

Pager div 已显示并附加，但无法正常工作我错过了什么吗?

The Pager div is displayed and attached but isnt working am I missing something?

谢谢塞缪尔

推荐答案

你的主要问题是你忽略了 getData 的 pData 可以转发到你的 ASMX网络服务.

You main problem is that you ignore the pData of the getData which can be forwarded to your ASMX web service.

您为 jqGrid 使用了非常旧模板.jqGrid 的当前版本现在是 4.3，您仍然使用在 3.5 版本中已弃用的 imgpath(请参阅 文档).非常老的 jqGrid 版本对 Web 服务的调用没有很好的支持，但即使在当时已经可以使用 addJsonData 和 addXmlData 方法来更有效地添加数据关于 addRowData.here 记录在案.

You use very old template for your jqGrid. The current version of jqGrid now 4.3 and you use still imgpath which was already deprecated in the version 3.5 (see the documentation). Very old version of jqGrid had no good support for calling of Web services, but even at the time one could already use addJsonData and addXmlData methods to add the data more effectively as you do with respect of addRowData. It is documented here.

我建议您最好不要修改 getData 函数，而是使用 datatype: 'json' 而不是 datatype 作为函数.例如，在旧演示中，您可以找到一个如何准确实现此功能的示例.在 another answer 中，您可以找到如何使用 loadonce: true 参数的示例，以防万一宁愿不要在服务器上实现数据分页，而是希望将所有网格数据发送到客户端，并允许 jqGrid 在客户端为您执行分页、排序和过滤数据.它只能在相对较少的行数(例如数百行)下有效.

I recommend you better instead of modifying of getData function use datatype: 'json' instead of datatype as function. In the old demo for example you can find an example how to implement this exactly. In another answer you can find an example how to use loadonce: true parameter in case if you prefer don't implement data paging on the server and instead of that want send all the grid data to the client side and allow jqGrid do paging, sorting and filtering the data for you on the client side. It can work effective only with relatively small number of rows (some hundred rows for example).

UPDATED:如果你使用SqlDataReader从数据库中获取数据，你可以根据SqlCommand构造SQL语句(SqlCommand)您从服务器接收的 code>rows 和 page 参数.

UPDATED: If you use SqlDataReader to get the data from the database you can construct the SQL statement (SqlCommand) base on the rows and page parameters which you receive from the server.

在大多数情况下，您需要查询具有唯一 ID 的数据.因此，您可以使用 SELECT TOP 和 LEFT OUTER JOIN 构造实现分页.让我们通过一个例子来解释它.例如，您需要使用 Northwind 数据库.要获取第一页数据，您可以使用

In the most cases you need query the data which has unique ids. So you can implement paging using of SELECT TOP and LEFT OUTER JOIN construction. Let us I explain it on an example. For example you need to query Product with the price from the dbo.Products table of the Northwind database. To get first page of data you can use

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

where 10 您应该替换为 rows 参数的值.要获取由参数 page 定义的另一个页面，您需要跳过 (page-1)*rows 项并获取下一个顶部 page 项.使用 公用表表达式 (CTE) 语法，您可以编写不同的语句简单:

where 10 you should replace to the value of the rows parameter. To get another page defined by parameter page you need skip (page-1)*rows items and get the next top page items. Using common table expression (CTE) syntax you can write the statement vary easy:

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) 的数据库，您可以针对子查询重写相同的查询:

You should just replace 10 and 20 on two places above to rows and (page-1)*rows. If you has some database which not support common table expression (CTE) you can rewrite the same query with respect of subqueries:

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

这篇关于为 JqGrid 添加分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！