用jQuery兑现的一个分页工具栏

用jQuery实现的一个分页工具栏
先看下效果图：


这是第一次写博文，是关于学习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); // 3var end = parseInt(this.currentPage)+parseInt(this.step);if (start<this.step) {  // 起始值小于stepstart=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为dispageitems += " class='dispage'";} else {items += " onclick='javascript:turnPage("+n+");'";}items += ">&nbsp;"+i+"&nbsp;</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");  // 样式ulpageunderlinevar hidepart = $("#table2 tr:not(.list_table_tr)"); // 隐藏部分CSS的id选择器hidepart.hide();for (i = this.getStartIndex(); i < this.getEndIndex(); i++) {hidepart.eq(i).show();}}};