easyui-datagrid 假分页

假分页就是将数据一下全查出来,利用前端来把所有数据进行分页。
在easyui里实现分页(实现分页的方式很多种,只记录我自己使用的方式):
1.前台部分,js,添加pagination分页插件

$('#dg').datagrid({
        pagination: true,	//表示在datagrid设置分页
        pageSize: 30,		//分页大小(每页10条)
        pageNumber:1,	//第几页显示(默认第一页,可以省略)
        pageList: [10, 20, 30], //设置每页记录条数的列表
    });
    
$('#dg').datagrid({ loadFilter: pagerFilter }).datagrid({
	url: '/realtime/well'	//加载数据的controller
});

2.处理分页数据通用代码,我从网上复制来的,加到页面上就行了

	// 分页数据的操作
    function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {	// is array
            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;
    }

3.后台部分,返回json数据
一定要返回json数据,并且json数据的格式要如下:

{"total":106,"rows":[{},{},{}.....]}

total是数据总数,rows为所有数据内容,我的后台数据格式:

List<Map<String, Object>> lists = new ArrayList<Map<String, Object>>();
//省略数据处理部分......
Map<String,Object> mp = new HashMap<String,Object>();
mp.put("total",lists.size());
mp.put("rows",lists);
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值