为JqGrid添加分页
我正在尝试使用一些博客中提供的示例将jQuery Grid添加到我的应用程序(C#和Asp.net)中,能够使用Webservice发送的Json数据。 现在已经尝试为Grid添加分页并得到了strucked.Script就像这样。
$(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: '', 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: '', 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; }
… html块
寻呼机div显示并附加但不工作我错过了什么?
谢谢塞缪尔
您的主要问题是您忽略了可以转发到ASMX Web服务的getData
的pData
。
您为jqGrid使用非常旧的模板 。 jqGrid的当前版本现在是4.3,你仍然使用版本3.5中已经弃用的imgpath
(参见文档 )。 非常旧版本的jqGrid对调用Web服务没有很好的支持,但即使在当时已经可以使用addJsonData
和addXmlData
方法来更有效地添加数据,就像对addRowData
。 这里记录在案。
我建议你更好,而不是修改getData
函数使用datatype: 'json'
而不是datatype
作为函数。 例如, 在旧的演示中 ,您可以找到如何准确实现此示例的示例。 在另一个答案中,您可以找到一个示例如何使用loadonce: true
参数,以防您不喜欢在服务器上实现数据分页,而不是希望将所有网格数据发送到客户端并允许jqGrid进行分页,排序并在客户端为您过滤数据。 它只能在行数相对较少的情况下有效(例如,几百行)。
更新 :如果使用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-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