添加分页的jqGrid的 [英] Add Paging for JqGrid
问题描述
在尝试jQuery的电网加入到使用一些博客提供的样品，能够使用web服务发送JSON数据我的应用程序（C＃和Asp.net）。
现在尝试添加为网格分页，得到strucked.Script是这样的。
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块
...html block
<table id="table" cellpadding="0" cellspacing="0">
</table>
<div id="pager" class="scroll" style="text-align:center;"></div>
显示寻呼机DIV和连接，但心不是我的工作我失去了一些东西？
The Pager div is displayed and attached but isnt working am I missing something?
谢谢
塞缪尔
推荐答案
您的主要问题是，你忽略了的pData 的的getData <中/ code>可转发到您的ASMX Web服务。
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和使用仍然 imgpath 这已经是德$ P $在版本3.5 pcated（见的文档）。很老版本的jqGrid的有用于调用Web服务没有很好的支持，但即使是在一个时间已经可以使用 addJsonData 和 addXmlData 方法，以更有效地为您提供关于 addRowData 做添加数据。据这里记录。
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的修改函数使用数据类型：JSON而不是数据类型的功能。在老演示例如，你可以找到一个例子，如何准确地实现这一点。在另一个答案你可以找到一个示例演示如何使用 loadonce：真正的参数的情况下，如果preFER不执行服务器上的数据分页和，而不是希望所有的网格数据发送到客户端，并允许做的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).
更新时间：：如果您使用 SqlDataReader的来从数据库中获取的数据可以构造SQL语句（的SqlCommand ）的行基和页你从服务器接收的参数。
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 建设。让我们来解释一下我在这一个例子。例如，你需要查询产品从的 dbo.Products 表中的价格=http://www.microsoft.com/download/en/ details.aspx？ID = 23654相对=nofollow>罗斯文数据库。为了获取数据的第一页，你可以使用
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
其中， 10 应更换到行参数的值。为了获得由参数定义的另一个页面页你需要跳过（页1）*行项目，并获得下一个顶部页项目。使用公共表前pression（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 在两地以上行和（页1）*行。如果你有一些数据库，不支持通用表前pression（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屋！
