使用EasyUI DataGrid分页功能,需要添加‘人员分类’条件进行查询,界面如下图。
一、添加DataGrid组件属性:
$('#grdMain').datagrid({
//url: 'EmployServlet?act=load', // 不需要设置这个属性
pagination: true,
pageList: [10, 20, 50, 100],
pageSize: 10,
......
二、定义刷新按钮事件
$("#btnLoad").click(function() {
var vPageNumber = $('#grdMain').datagrid('getPager').data("pagination").options.pageNumber;
var vPageSize = $('#grdMain').datagrid('getPager').data("pagination").options.pageSize;
loadData(vPageNumber, vPageSize);
});
获取网格分页控件中的pageNumber和pageSize后调用装载数据方法。
三、装载数据方法
function loadData(pageNumber, pageSize)
{
var vEmployType = $('#cbbType').combobox('getValue');
$.ajax({
type : "post",
url : "EmployServlet?act=load",
data : {
"employType" : vEmployType,
"pageNumber": pageNumber,
"pageSize": pageSize
},
dataType : "json",
// async: false, //同步请求
error : function(event, request, settings) {
alert("请求失败。" + event);
},
success : function(data) {
if (data.packStatus == 200) {
$("#grdMain").datagrid({
data: data.retDat
});
initDataGrid(pageNumber, pageSize); // 不知道为什么每次都要重新绑定当前页面和相关事件回调
} else if (data.packStatus == 301) {
alert("应用超时,请求重新登录。");
top.location = 'login.jsp';
} else {
alert(data.retMsg);
}
}
});
}
function initDataGrid(pageNumber, pageSize)
{
if (!pageNumber) pageNumber = 1;
if (!pageSize) pageSize = 10;
var vGridPage = $("#grdMain").datagrid("getPager");
$(vGridPage).pagination({
pageNumber: pageNumber, // 不设置当前页会变成1
pageSize: pageSize, // 不设置页面记录数会变成10
onSelectPage: function(pageNumber, pageSize){
loadData(pageNumber, pageSize); // 不设置onSelectPage刷新数据之后便失效。
});
}
附SQL2005以后分页SQL语句
Select * From
(Select ROW_NUMBER() over(Order By PID) as rowNumber,* From SJ_SBRY Where rylx = 3) as t
where t.rowNumber>=100 and t.rowNumber<=120