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