文档章节

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

 大东家
发布于 2015/01/13 10:29
字数 571
阅读 113
收藏 0
   //设置分页控件 
   
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;
         }

© 著作权归作者所有

粉丝 22
博文 255
码字总数 111936
作品 0
长沙
项目经理
私信 提问
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
9.8K
3
easyui 中的datagrid 请求action没有进入action方法?也不知道什么原因?

$(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'show......

我爱编程zc
2016/08/28
814
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
2.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

关于谷歌浏览器崩溃,打不开任何界面

首先:谷歌浏览器右键打开属性,在箭头所指的位置复制粘贴 -no-sandbox。(需要空一格再写入 -no-sandbox) 其次:你打开谷歌浏览器可以看到如下提醒,提醒你,稳定性和安全性会有所下降,但...

Raphael98
19分钟前
2
0
java 删除文件夹下的文件

/** * 删除已经下载过的文件 * @param path * @return */ @ApiOperation(value = "删除已经下载过的Excel",httpMethod="",notes="") @GetMapping("/deleteExcel") public Object downLoad(@......

简小姐
19分钟前
3
0
如何安装GMP,MPFR,MPC,ELF,无需共享库?

如何使用当前版本, 使用正确版本的依赖关系,不使用包管理器(如yum,rpm,apt,dpkg)并且不使用共享库,来逐块安装GCC(GNU编译器集合)? 典型的开发人员可能希望以典型的方式安装GCC,使...

mskk
23分钟前
3
0
Rancher + VMware PKS实现全球数百站点的边缘K8S集群管理

Sovereign Systems是一家成立于2007年的技术咨询公司,帮助客户将传统数据中心技术和应用程序转换为更高效的、基于云的技术平台,以更好地应对业务挑战。曾连续3年提名CRN,并且在2012年到2...

RancherLabs
27分钟前
2
0
docker修改log-driver后启动失败问题解决

vi /etc/sysconfig/docker 去掉--log-driver=journald 重启docker,重新run一个容器

abowu
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部