一、后台分页
（1）客户端代码：
var dg = $('#table');
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
});
getData();
},
pageList: [10, 20, 30, 50], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页，共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录, 共 {total} 条记录'
});
pagenumber = opts.pageNumber; //pageNumber为datagrid的当前页码
pagesize = opts.pageSize; //pageSize为datagrid的每页记录条数
function getData(){
$.ajax({
url : testUrl,
type : 'post' ,
data :{"pagenumber":pagenumber,"pagesize":pagesize},
dataType : 'json' ,
cache : false ,
success : function(data){
$("#table").datagrid("loadData",data);
}
})
} （2）服务端代码：
public class PageServer {
string page = "1";
string rows = "10";
int intPage = Integer.parseInt((page == null || "0".equals(page)) ? "1" : page);
int number = Integer.parseInt((rows == null || "0".equals(rows)) ? "10" : rows);
int start = (intPage - 1) * number;
String querySQL = "select * from T_userInfo order by birthdate limit "+ start + "," + number + ";";
//do some thing and return data......
}
二、前台分页
$("table").datagrid({
data : gridData,
loadFilter: pagerFilter,
height: $(document).height()*0.87,
striped: true,
selectOnCheck: true,
pagination: true,
pageSize:15,
pageList:[10,15,20,30,40,50],
onLoadSuccess: function (data) {
if (data.total == 0) {
$(this).datagrid('appendRow',
{username: '<div style="text-align:center;color:red">没有查询到相关记录！</div>' }).datagrid('mergeCells',{index: 0, field: 'alarmCode', colspan: 8 });
var pager = $(this).datagrid('getPager');
$(pager).pagination({
displayMsg: '当前显示 0 条记录 共 0 条记录',
})
}
},
columns: [
[{
field: 'userName',
title: '用户名',
width: '10%',
align: 'center'
}, {}
......
}]
})
}
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
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);
}
if(opts.pageNumber==0){
opts.pageNumber+=1;
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}