首页 > 代码库 > EasyUI Datagrid 分页

EasyUI Datagrid 分页

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}
                ]],
                onl oadSuccess: 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}
                ]],
              onl oadSuccess: 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 =http://www.mamicode.com/ {
                    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 =http://www.mamicode.com/ json;
                }
            });
            return data;
        }

EasyUI Datagrid 分页