先看下效果图：
这是第一次写博文，是关于学习jQuery完成的一个实例，希望大家不吝赐教。
以下是代码片段，完整的demo详见附件！ 望和大家一起学习进步。谢谢！
/**
* @described 分页组件
* @author xuxb
* @see 通过jquery完成页面数据的分页工具栏 pagetoolbar
* @see 用于缓解页面数据量过大而导致页面停顿或假死现象
* @mark 定义的局部变量为私有变量 提供对应的方法进行操作， 如 this.totalSize = totalSize; 将破坏对象的封装
* @created 2011-05-30
*/
var pageInfo = null; // 全局分页信息
var PAGE_SIZE = 10; // 每页显示多少条
function turnPage(pageNo) { // 翻页操作
pageInfo.currentPage = pageNo;
pageInfo.show();
}
function PageComponent(totalSize, pageSize, currentPage) {
this.totalSize = totalSize;
this.pageSize = pageSize;
this.currentPage = currentPage;
this.toolbarSize = 7; // 默认的页码个数 （奇数可以保持页码对称）
this.step = 3; // 当前页码的前、后页码数（步长）
if (PageComponent._init==undefined) { // 调用初始化方法 --
this.init();
PageComponent._init = 1;
}
}
PageComponent.prototype.init = function() { // 完成一些初始化动作init
// $("#tipPage").text(this.getTipPage());
};
PageComponent.prototype.getStartIndex = function() { // 获取开始索引值
if (this.currentPage == 1)
return 0;
else
return (this.currentPage - 1) * this.pageSize;
};
PageComponent.prototype.getEndIndex = function() { // 获取结束索引值
if (this.currentPage == 1)
return this.pageSize;
else
if (this.currentPage * this.pageSize >= this.totalSize) {
return this.totalSize;
}
else {
return this.currentPage * this.pageSize;
}
};
PageComponent.prototype.getPageCount = function() { // 获取总页数
return Math.ceil(this.totalSize / this.pageSize);
};
PageComponent.prototype.getUpPage = function() { // 获取上一页 页码
if (this.currentPage - 1 < 1)
return 1;
return this.currentPage - 1;
};
PageComponent.prototype.getDownPage = function() { // 获取下一页 页码
if (this.currentPage >= this.getPageCount())
return this.getPageCount();
return this.currentPage + 1;
};
PageComponent.prototype.getFirstPage = function() { // 获取下一页 页码
return 1;
};
PageComponent.prototype.getTipPage = function() { // 获取提示信息
return "第" + this.currentPage + "页/共" + this.getPageCount() + "页 共有结果" + this.totalSize + "条";
};
PageComponent.prototype.computePage = function() {
$("#toolbar").hide();
// $("#tipPage").text(this.getTipPage());
// $("#firstPage").val(this.getFirstPage());
// alert($("#upPage").val());
// $("#upPage").val(this.getUpPage());
// $("#downPage").val(this.getDownPage());
// $("#endPage").val(this.getPageCount());
$("#tipPage").html(this.getTipPage());
$("#toolbar").show();
};
PageComponent.prototype.pageToolbar = function() {//公式
/*
* 重新理思路
* 1. 根据当前页码生成待生成的JSON格式页码 如{"< Prev":"1","2":"2",....,"Next >":"2"}
* 2. 可分为2种情况实现
*/
var jsonArray = new Array();
var items = "";
jsonArray.push('"< Prev ":"'+this.getUpPage()+'"'); // 上一页
jsonArray.push('"'+this.getFirstPage()+'":"'+this.getFirstPage()+'"'); // 首页
if (this.getPageCount() <= this.toolbarSize) {// 情况一：需要生成的页码小于或等于默认值
for (var i = 1; i <= this.getPageCount(); i++) {
if (this.currentPage<=this.yardage*2) {
jsonArray.push('"'+i+'":"'+i+'"'); // 格式如下 "2":"2"
}
}
} else { // 情况二：需要生成的页码大于默认值
var start = parseInt(this.currentPage)-parseInt(this.step); // 3
var end = parseInt(this.currentPage)+parseInt(this.step);
if (start<this.step) { // 起始值小于step
start=2;
end=start+2*this.step-1;
}else if (end>this.getPageCount()) { // 结束值大于总页数
end=this.getPageCount();
start=end-2*this.step;
}
for (var i=start; i<=end; i++) {
if(i==start&&start>=this.step) { // first...
jsonArray.push('"first...":"..."');
}
jsonArray.push('"'+i+'":"'+i+'"'); // 格式如下 "2":"2"
if (i==end&&end<this.getPageCount()-1) { // after...
jsonArray.push('"after...":"..."');
}
}
}
jsonArray.push('"'+this.getPageCount()+'":"'+this.getPageCount()+'"'); // 末页
jsonArray.push('" Next >":"'+this.getDownPage()+'"');// 下一页
jsonArray = "{" + jsonArray.join(",") + "}";
jsonArray = $.parseJSON(jsonArray);
var temp = this.currentPage; // 保存当前页码值
// var regx = /^\d+$/;
$.each(jsonArray, function(i, n) {
if (!isNaN(n)) {
items += "<li";
if (temp==n&&i==n) { // 当前页和当前待生成的页码一样， 并且生成页码的key和value相等。
items += " class='currentpage'";
} else if (temp==n&&i!=n) {
// 1.若当前页没有上一页，上一页按钮css为dispage
// 2.若当前页没有下一页，下一页按钮css为dispage
items += " class='dispage'";
} else {
items += " onclick='javascript:turnPage("+n+");'";
}
items += "> "+i+" </li>"
} else {
items += n; // ... 省略号
}
});
$("#ulpage").empty();
$("#ulpage").append(items);
};
PageComponent.prototype.addClass = function(className) { // 鼠标悬停切换样式
$(".ulpage li").bind("mouseover mouseout", function() {
$(this).toggleClass(className);
});
};
PageComponent.prototype.show = function(pageNo) {
if (pageNo!=null&&pageNo!="") { // 可以接收参数，当前页码
this.currentPage = pageNo;
}
/*
* 前置条件：
* 1.当前页码大于0
* 2.总记录数大于0
* 3.当前页码必须小于总页码
*/
if (this.currentPage > 0 && this.totalSize > 0 && this.currentPage <= this.getPageCount()) {
this.computePage();
this.pageToolbar();
this.addClass("ulpageunderline"); // 样式ulpageunderline
var hidepart = $("#table2 tr:not(.list_table_tr)"); // 隐藏部分CSS的id选择器
hidepart.hide();
for (i = this.getStartIndex(); i < this.getEndIndex(); i++) {
hidepart.eq(i).show();
}
}
};