easyUI datagrid 前端假分页

datagrid有两种分页方式，真分页和假分页。

所谓真分页，就是真的每次只获取一张分页的数据。

所谓假分页，就是将所有数据全部获取下来，然后利用其分页控件进行分页。

下面具体说说假分页：

1、datagrid有些参数需要设置：

[javascript]  view plain  copy

1. $("#dg").datagrid({  
2.     pageNumber:1,  
3.     pagination: true,//分页控件   
4.     rownumbers: true,//显示行号  
5.     pageSize: 10,  
6.     pageList: [10, 15, 50, 100],  
7.     loader: myLoader, //前端分页加载函数  
8.     ……  

2、加载函数：

[javascript]  view plain  copy

1. function myLoader(param, success, error) {  
2.     var that = $(this);  
3.     var opts = that.datagrid("options");  
4.     if (!opts.url) {  
5.         return false;  
6.     }  
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.   
27.     function bulidData(data) {  
28.         debugger;  
29.         var temp = $.extend({}, data);  
30.         var tempRows = [];  
31.         var start = (param.page - 1) * parseInt(param.rows);  
32.         var end = start + parseInt(param.rows);  
33.         var rows = data.rows;  
34.         for (var i = start; i < end; i++) {  
35.             if (rows[i]) {  
36.                 tempRows.push(rows[i]);  
37.             } else {  
38.                 break;  
39.             }  
40.         }  
41.   
42.         temp.rows = tempRows;  
43.         return temp;  
44.     }  
45. }  

照抄可也，只要 jQuery easyui 1.2.6+

3、服务器端获取数据，格式一定要是：

｛"total":106,"rows":[{},{},{}.....]｝，且rows.length的长度应该等于total的值。显然，rows就是具体的数据。

如此，分页可成矣，只不过，它是假的。

4、如果需要刷新数据，务必清除缓存：

[javascript]  view plain  copy

1. $("#dg).data().datagrid.cache = null;  
2. $("#dg).datagrid("reload");