EasyUI Datagrid 分页显示（客户端）

转自：https://blog.csdn.net/metal1/article/details/17536185

By ZYZ

在使用JQuery EasyUI 的Datagrid 控件时，其中的pagination（分页控件）非常有用，该分页控件允许用户导航页面的数据，它支持页面导航和页面长度选择的选项设置。

Pagination控件上的显示文字默认是英文的，在引用了中文翻译文件（easyui-lang-zh_CN.js）可以全部显示为中文。如下：

<scripttype="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>
首先初始化datagrid
如果要达到正常的分页效果，需要在初始化函数内对datagrid的分页方法进行设置。

$(function(){

$('# table').datagrid({loadFilter:pagerFilter});

}）;
设置datagrid获取数据的来源：
在这里分别以get和post方法来获取数据。

 1 functionSearchTrainee() {
 2 //获取搜索条件
 3 var companyCode =$('#hiddenCompanyCode').val();
 4 var name = $('#txtName').val();
 5 var planName =$('#textSearchPlan').val();
 6 if (companyCode == "")companyCode = "000";
 7 var rowsData = "[]";
 8 //get方法：
 9 varhandler = "Ajax/GetTraineeHandler.ashx?Name=" + name +"&PlanName=" + planName + "&CompanyCode=" +companyCode; 
10 $('#tableTrainee').datagrid('options').url = encodeURI(handler);
11 $('#tableTrainee').datagrid('reload'); 
12 //post方法：
13 $.post('Ajax/GetTraineeHandler.ashx', {
14 Name: name,
15 PlanName: planName,
16 CompanyCode: companyCode
17 }, function (data) {
18 $('#tableTrainee').datagrid('loadData', JSON.parse(data));
19 });
20 }

Post方法中的JSON.parse 函数很重要，它将post得到的字符串转换成了object类，因为过滤函数中需要使用object类的参数。
设置页面过滤函数

 1        
 2 
 3 function pagerFilter(data)
 4 {
 5 var dg = ('#table').datagrid();;
 6 var opts = dg.datagrid('options');
 7 var pager = dg.datagrid('getPager');
 8 pager.pagination({
 9 onSelectPage:function(pageNum, pageSize){
10 opts.pageNumber = pageNum;
11 opts.pageSize = pageSize;
12 pager.pagination('refresh',{
13 pageNumber:pageNum,
14 pageSize:pageSize
15 });
16 dg.datagrid('loadData',data);
17 }
18 });
19 if(!data.originalRows){
20 data.originalRows =(data.rows);
21 }
22 var start =(opts.pageNumber-1)*parseInt(opts.pageSize);
23 var end = start + parseInt(opts.pageSize);
24 data.rows =(data.originalRows.slice(start, end));
25 return data;
26 }

一般获取Data数据时会采用一次获取全部数据，这种方法的确很方便省事。一次获取数据数据保存在浏览器中，翻页和改变行数的动作会非常的快速。

但是如果获取的数据量非常庞大，比如一百万行数据时怎么办呢？一次全部获取的话会严重影响Datagrid的加载速度，也加重了数据库服务器的工作负担，如果遇到并发用户非常多的情况，那就更加慢了。