EasyUI Datagrid 分页显示(客户端)

EasyUI Datagrid 分页显示(客户端)

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方法来获取数据。

functionSearchTrainee() {
//获取搜索条件
            var companyCode =$('#hiddenCompanyCode').val();
            var name = $('#txtName').val();
            var planName =$('#textSearchPlan').val();
            if (companyCode == "")companyCode = "000";
            var rowsData = "[]";
//get方法:
varhandler = "Ajax/GetTraineeHandler.ashx?Name=" + name +"&PlanName=" + planName + "&CompanyCode=" +companyCode; 
           $('#tableTrainee').datagrid('options').url = encodeURI(handler);
           $('#tableTrainee').datagrid('reload');          
//post方法:
           $.post('Ajax/GetTraineeHandler.ashx', {
                Name: name,
                PlanName: planName,
                CompanyCode: companyCode
            }, function (data) {
               $('#tableTrainee').datagrid('loadData', JSON.parse(data));
            });
        }
Post 方法中的 JSON.parse 函数很重要,它将 post 得到的字符串转换成了 object 类,因为过滤函数中需要使用 object 类的参数。

设置页面过滤函数

       

 function pagerFilter(data)
      {
           var dg = ('#table').datagrid();;
           var opts = dg.datagrid('options');
           var pager = dg.datagrid('getPager');
           pager.pagination({
                 onSelectPage:function(pageNum, pageSize){
                     opts.pageNumber = pageNum;
                     opts.pageSize = pageSize;
                     pager.pagination('refresh',{
                         pageNumber:pageNum,
                         pageSize:pageSize
                     });
                     dg.datagrid('loadData',data);
                 }
             });
             if(!data.originalRows){
                 data.originalRows =(data.rows);
             }
             var start =(opts.pageNumber-1)*parseInt(opts.pageSize);
             var end = start + parseInt(opts.pageSize);
             data.rows =(data.originalRows.slice(start, end));
             return data;
         }

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

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值