js实现EasyUI-datagrid前台分页

1. //实现假分页
2. function myLoader(param, success, error) {
3. var that = $(this);
4. var opts = that.datagrid("options");
5. if (!opts.url) {
6. return false;
7. }
8. var cache = that.data().datagrid.cache;
9. if (!cache) {
10. $.ajax({
11. type: opts.method,
12. url: opts.url,
13. data: param,
14. dataType: "json",
15. success: function (data) {
16. that.data().datagrid['cache'] = data;
17. success(bulidData(data));
18. },
19. error: function () {
20. error.apply(this, arguments);
21. }
22. });
23. } else {
24. success(bulidData(cache));
25. }
26. function bulidData(data) {
27. var temp = $.extend({}, data);
28. var tempRows = [];
29. var start = (param.page - 1) * parseInt(param.rows);
30. var end = start + parseInt(param.rows);
31. var rows = data.rows;
32. for (var i = start; i < end; i++) {
33. if (rows[i]) {
34. tempRows.push(rows[i]);
35. } else {
36. break;
37. }
38. }
39. temp.rows = tempRows;
40. return temp;
41. }
42. }

加载datagrid时的调用

1. $('#dg').datagrid({
2. loadMsg: '正在努力为您加载数据',
3. url: 'Handler.ashx?action=GetData' + "&Id=" +Id,
4. fitColumn: false,
5. pageNumber: 1,
6. pagination: true,//分页控件
7. rownumbers: true,//显示行号
8. pageSize: 3,
9. pageList: [3, 15, 50, 100],
10. loader: <span style="color:#ff0000;">myLoader</span>, //前端分页加载函数
11. onLoadSuccess: function (data) {
12. $("#dg").data().datagrid.cache = null;//清除datagrid 缓存，保证前台假分页；
13. //$('#dg').datagrid('reload');显示更新后的数据
14. }
15. });