EasyUI 后台分页实现记录

前言理论：

EasyUI 可以通过前台分页，也可以通过ajax后台分页，前台分页通常用于所查询的数量较少，且转换成json后文件较小的情况；后台分页用于查询结果较大，耗时较长的情况。

前台分页：

一次性查询并加载所有的数据，再通过loadFilter 进行分页，如：

$('#dataGrid').datagrid({
loadFilter: pagerFilter

}).datagrid('loadData', data.dataList);

后台分页：

第一次加载默认查询第一页的数据，当选择不同页数时候，只查询并加载那一页的数据。

  

后台需要传给前台的是【总的记录数（total：int）】和【当前页需要显示的数据（rows：List<T>）】,这些信息可通过Dictionary<string, object> 来传递，例如

var easyUIPages = new Dictionary<string, object>();

var alllist = new List<FullListStatusListView>();

easyUIPages.Add("total", pagecount);
easyUIPages.Add("rows", dataList);

return Json(easyUIPages, JsonRequestBehavior.AllowGet);

而后台分页的前台，不需要在处理分页逻辑，只需要显示后台传来的数据即可：

$('#' + gridId).datagrid('loadData', data);

1.前台页面

<table id="dataGrid_fullStatus">
<thead>
<tr>
<th data-options="field:'FVersion',align:'left',width:50">版本号
</th>
...

</tr>

</thead>
<tbody>
</tbody>
</table>

 

2.前台脚本有两种方式：

a.通过url方式获取数据

$('#' + gridId).datagrid({
url: url + "?" + formData,
});

  

b.通过ajax方式获取

//后台分页ajax 提交
var getEasyuiGridDataByPage = function (url, gridId, formId,pageNumber, pageSize,btnId) {
var formData = $("#" + formId).serialize();
url = url + "?" + formData;
$.ajax({
type: "POST",
url: url,
data: "page=" + pageNumber + "&rows=" + pageSize,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
$.messager.progress('close');
},
success: function (data) {
$('#' + gridId).datagrid('loadData', data);
$("#" + gridId).datagrid("loaded");
}
});
};

 

$(document).ready(function () {
//设置DataGrid基本属性
var _height = $(".tabs-container").height();
var _width = $("#PagTabs .panel").width();
$("#dataGrid_fullStatus").datagrid({
height: _height - 100,
width: _width - 40,
rownumbers: false,
singleSelect: true,
autoRowHeight: false,
//fitColumns: true,
pagination:true,
pageSize: 20,
loadMsg: 'Loading... ...',
toolbar: '#report_tb_fullStatus',
title: "-----------------------测试后台分页------------------------------------",

});
var pager = $('#dataGrid_fullStatus').datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNumber, pageSize) {
$("#dataGrid_fullStatus").datagrid("loading");
// alert('onSelectPage pageNumber:' + pageNumber + ',pageSize:' + pageSize);
getEasyuiGridDataByPage("/ClearingCheck/UserStateListReport/ReadByPage", "dataGrid_fullStatus", "searchForm_fullStatus", pageNumber, pageSize, "btn_submit_fullStatus");
}

});
});