EasyUI DataGrid 假分页

简介: EasyUI DataGrid 假分页

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

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;
}

注意点:

data 的格式为 {'total' : 0, 'rows' : []}
pagination、pageSize必须设置,且需要是pageList中的值
目录
相关文章
|
14天前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
18 2
|
14天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
14天前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
|
14天前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
6月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
6月前
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
|
6月前
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
|
6月前
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决
|
6月前
EasyUI Datagrid 分页事件
EasyUI Datagrid 分页事件