easyui 服务器端与客户端实现分页信息(easyui datagrid serverside and client side paginnation)

2015/08/27 13:23
阅读数 100
   //设置分页控件 
   
var p = $('#list_data').datagrid('getPager'); 
    $(p).pagination({ 
        pageSize: 10,//每页显示的记录条数,默认为10 
        pageList: [5,10,15],//可以设置每页记录条数的列表 
        beforePageText:'第',//页数文本框前显示的汉字 
        afterPageText:'页    共 {pages} 页', 
        displayMsg:'当前显示 {from} - {to} 条记录   共 {total} 条记录', 
        /*onBeforeRefresh:function(){
            $(this).pagination('loading');
            alert('before refresh'); 
            $(this).pagination('loaded');
        }*/ 
    });


function pagerFilter(data){
           if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
               data = {
                   total: data.length,
                   rows: data
               }
           }
           var dg = $(this);
           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;
       }

摘自: http://blog.hiter.org/2013/07/realization-of-easyui-datagrid-paging-at-the-front-desk.html

easyui datagrid 默认只支持客户端分页,经过一天的研究,终于搞定,唉,原来就是一句话的事。此段原创,仅供参考
function LoadData(no,per) {
	var url = "photo/query";
	var sendData = {};
	sendData.op = "page";//操作方式
	sendData.no =no;//页码 page no 
	sendData.per = per;//pages on per page,if per<=0, no page operation
	sendData.orderby = "pubtime";//order field
	sendData.order = "true";//order method,0 or no this field is ascending order and true is descending order
	sendData = "data="
		+ encodeURIComponent(encodeURIComponent(JSON.stringify(sendData)));
	$.getJSON(url, sendData, function(data) {
		if (data) {
			if (data.result) {
				console.log("load ok");
				console.log("before load:");
				var p = $('#test').datagrid('getPager');
				 var opts=$(p).pagination("options");
				 console.log("total:"+opts.total);
				$('#test').datagrid("loadData", data.data);
				//在这里加点假数据?
				 console.log("after load:");
				 var opts=$(p).pagination("options");
				 console.log("total:"+opts.total);
				 $(p).pagination({total:12});//最关键的就是这一句,意思就是在调用Load函数以后,它会默认设置为data的大小,这就是困扰了我一天的原因,所以在这里设置一下总数后,一切正常。服务器端实现分页的好处是一次不用拉取所有数据,不然代价太大了。
//this sentence is the most import, when we load data ,it sets the total to data count ,and we need to set it to what we need.
console.log("after set:");
				 var opts=$(p).pagination("options");
				 console.log("total:"+opts.total);
			} else {
				console.log("load failed");
			}
		}
	});
}

客户端分页使用loadFilter
   function pagerFilter(data){
             if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
                 data = {
                     total: data.length,
                     rows: data
                 }
             }
             var dg = $(this);
             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;
         }

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部