特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/
1、效果示例
2、代码样式
/*
* 基于jquery 分页插件
* by mao2080@sina.com
*/
$(function (){
window.pageUtil = {
/**
* 构建分页
* @param {Object} divId 要绑定的容器
* @param {Object} data 查询数据
* @param {Object} args 参数信息
*/
page : function(divId, data, args){
var pager = $(divId);
var pageInfo = (!data || !data.data)?{"currPage":0,"pageSize":10,"pageTotal":0,"recordTotal":0,"prevPage":0,"nextPage":0,"firstPage":0,"lastPage":0}:data.data;
pageInfo.pageTotal = this.getPageTotal(pageInfo);
var html = "<table><tbody><tr>";
if(!args.hidePageSelect){
html+='<td>显示行数</td>';
html+='<td>';
if(!args.pageSelect){
html+=this.getPageSelect([10, 20, 50],pageInfo.pageSize);
}else{
html+=this.getPageSelect(args.pageSelect, pageInfo.pageSize);
}
html+='</td>';
}
html+='<td>共'+pageInfo.pageTotal+'页，</td>';
html+='<td>转到</td><td><input type="text" value="'+pageInfo.currPage+'" size="5" class="page-turn"></td>';
html+='<td>页 第'+this.getRowRange(pageInfo)+'项</td>';
html+='<td>，共'+pageInfo.recordTotal+'项</td>';
html+='<td>';
if(pageInfo.currPage == 1){
html+='<input type="button" value="Prev" class="page-prev page-button-disable">';
}else{
html+='<input type="button" value="Prev" class="page-prev">';
}
if(pageInfo.currPage == pageInfo.pageTotal){
html+='<input type="button" value="Next" class="page-next page-button-disable">';
}else{
html+='<input type="button" value="Next" class="page-next">';
}
html+='</td>';
html+='</tr></tbody></table>';
pager.html(html);
pager.find(".page-select").off("change").bind("change", function(){
if(args.query){
args.query(1, $(this).val());
}
});
pager.find(".page-turn").off("keypress").bind("keypress", function(event){
if(event.keyCode == "13" && args.query){
var pages = $(this).val();
if(/^\+?[1-9][0-9]*$/.test(pages) && (pages*1> 0 && pages*1 <= pageInfo.pageTotal)){
args.query(pages, pageInfo.pageSize);
}else{
alert("请输入1~"+pageInfo.pageTotal+"的数字.");
}
}
});
pager.find(".page-prev").off("click").bind("click", function(){
if(args.query && !$(this).hasClass("page-button-disable")){
args.query(pageInfo.currPage-1, pageInfo.pageSize);
}
});
pager.find(".page-next").off("click").bind("click", function(){
if(args.query && !$(this).hasClass("page-button-disable")){
args.query(pageInfo.currPage+1, pageInfo.pageSize);
}
});
},
/**
* 获取总页数
* @param {Object} data
*/
getPageTotal : function(data){
if(data.recordTotal == 0){
return 0;
}
if(data.recordTotal%data.pageSize == 0){
return data.recordTotal/data.pageSize;
}else{
return parseInt(data.recordTotal/data.pageSize)+1;
}
},
/**
* 获取当前数据行数范围
* @param {Object} data
*/
getRowRange : function(data){
if(data.recordTotal == 0){
return "0-0";
}
if(data.currPage < data.pageTotal){
return ((data.currPage-1)*data.pageSize+1)+"-"+(data.currPage)*data.pageSize;
}else{
return ((data.currPage-1)*data.pageSize+1)+"-"+(data.recordTotal);
}
},
/**
* 构建分页下拉框
* @param {Object} pageSelect 分页条数
* @param {Object} pageSize 一页大小
*/
getPageSelect : function(pageSelect, pageSize){
var pageSel = '<select class="page-select">';
for(var i in pageSelect){
if(pageSelect[i] == pageSize){
pageSel+="<option selected='selected' value="+pageSelect[i]+">"+pageSelect[i]+"</option>";
}else{
pageSel+="<option value="+pageSelect[i]+">"+pageSelect[i]+"</option>";
}
}
return pageSel+"</select>";
}
};
});