EasyUI Datagrid 分页

Posted 2020-08-17 付太

EasyUI Datagrid 分页，两种情况

第一种，向后台请求数据，点击分页请求一次，点击排序请求一次。使用表格自带的ajax。

box.datagrid({
                url: ‘’, //后台请求地址                  
                queryParams: {‘name‘:‘‘,‘age‘:‘‘},//向后台传参
                width: ‘100%‘,
                height: ‘500px‘,
                fitColumns: true,
                singleSelect:true,
                remoteSort:true,
                pageList : [ 5, 10, 20, 30, 40, 50, 100 ],// 可以设置每页记录条数的列表
                pageSize : 50,// 每页显示的记录条数，默认为10
                loadMsg : ‘正在加载数据，请稍后...‘,
                pagination : true, // 分页工具栏
                columns:[[
                    {field:‘name‘,title:‘姓名‘,width:‘50%‘,align:‘left‘,sortable:true},
                    {field:‘age‘,title:‘年龄‘,width:‘50%‘,align:‘left‘,sortable:true}
                ]],
                onLoadSuccess: function(data){
                }
});
pageUtil(box);

function pageUtil(box) {
    box.datagrid(‘getPager‘).pagination({
        loadMsg: ‘正在加载数据，请稍后...‘,
        beforePageText: ‘第‘,
        // 页数文本框前显示的汉字
        afterPageText: ‘页 共 {pages} 页‘,
        displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘
    });
}

 

第二种 只向后台请求一次，点击分页不再发送请求，但依然能够分页、排序。不使用表格自带的ajax，需要单独写ajax

box.datagrid({
              widht: ‘100%‘,
              height: ‘500px‘,
              fitColumns: true,
              singleSelect:true,
              rownumbers : false,
              remoteSort:false,
              sortName:"name",
              sortOrder:"desc",
              pageList : [ 5, 10, 20, 30, 40, 50, 100 ],// 可以设置每页记录条数的列表
              pageSize : 50,// 每页显示的记录条数，默认为10
              loadMsg : ‘正在加载数据，请稍后...‘,
              pagination : true, // 分页工具栏

              columns:[[
                    {field:‘name‘,title:‘姓名‘,width:‘50%‘,align:‘left‘,sortable:true},
                    {field:‘age‘,title:‘年龄‘,width:‘50%‘,align:‘left‘,sortable:true}
                ]],

              onLoadSuccess: function(data){ }, 
              onSortColumn:function(sort,order){ datagridUtils.onSortColumn(box,sort); } 
}); 
box.datagrid({loadFilter:pagerFilter}).datagrid(‘loadData‘, getData()); 
pageUtil(box);

 

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

 

 

function getData(){
            var jsonurl = "";
            var data ="";
            $.ajax({
                url:jsonurl,
                async:false,
                type:"post",
                data:{‘name‘:‘‘,‘page‘:1,‘rows‘:100},//data是传给后台的参数,如果不需要参数也可以不写
                success: function(json){//回调函数
                    data = json;
                }
            });
            return data;
        }