当前位置 博文首页 > zcy_wxy的博客:EasyUI DataGrid 假分页

    zcy_wxy的博客:EasyUI DataGrid 假分页

    作者:[db:作者] 时间:2021-07-21 21:38

    首先说明,假分页一般是不可取的。

    DataGrid配置

    $('#xxx').datagrid({
    	title:'xxx',
    	fit: true,
    	fitColumns: false,
    	border: false,
    	rownumbers:true,
    	pagination:true,
    	pageList: [20,30,50,100,200],
    	pageSize:20,
    	singleSelect:true,
    	columns : [[{field: 'xxx',title:'xxx',width:160}]],
    	loadFilter : pagerFilter
    });

    PageFilter函数

    function pagerFilter(data)
    {
    	//data 的格式为 {'total' : 0, '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;
    			dg.datagrid('loadData',data);
    		}
    	});
    	
    	var start=0;
    	if(!data.originalRows){
    		data.originalRows =data.rows;
    		pager.pagination('refresh',{
    			pageNumber:1,
    			pageSize:30
    		});
    		dg.datagrid('loadData',data);
    	}else{
    		start =(opts.pageNumber-1)*parseInt(opts.pageSize);
    	}
    	var end = start + parseInt(opts.pageSize);
    	
    	//截取数据
    	data.rows =(data.originalRows.slice(start, end));
    	return data;
    }

    注意点:

    1. data 的格式为 {'total' : 0, 'rows' : []}
    2. pagination、pageSize必须设置,且需要是pageList中的值
    cs
    下一篇:没有了