1、分页jquery.page.js

//分页插件/**2014-08-05 ch**/(function ($) {    var ms = {        init: function (obj, args) {            return (function () {                ms.fillHtml(obj, args);                ms.bindEvent(obj, args);            })();        },        //填充html        fillHtml: function (obj, args) {            return (function () {                obj.empty();                //上一页                if (args.current > 1) {                    obj.append('');                } else {                    obj.remove('.prevPage');                    obj.append('');                }                //中间页码                if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {                    obj.append('' + 1 + '');                }                if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {                    obj.append('...');                }                var start = args.current - 2, end = args.current + 2;                if ((start > 1 && args.current < 4) || args.current == 1) {                    end++;                }                if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {                    start--;                }                for (; start <= end; start++) {                    if (start <= args.pageCount && start >= 1) {                        if (start != args.current) {                            obj.append('' + start + '');                        } else {                            obj.append('' + start + '');                        }                    }                }                if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {                    obj.append('...');                }                if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {                    obj.append('' + args.pageCount + '');                }                //下一页                if (args.current < args.pageCount) {                    obj.append('');                } else {                    obj.remove('.nextPage');                    obj.append('');                }            })();        },        //绑定事件        bindEvent: function (obj, args) {            return (function () {                $(obj).find('.tcdNumber').off("click").on("click", function () {                    var current = parseInt($(this).text());                    ms.fillHtml(obj, { "current": current, "pageCount": args.pageCount });                    if (typeof (args.backFn) == "function") {                        args.backFn(current);                    }                }); 　　　　　　　　　 // 不用这个是为了适应那种每次查询之后，分页条数变化的情况，而且这种情况很常见， 　　　　　　　　　 // 如果采用下面这种方式，会出现多次绑定，多次查询的情况。 //obj.on("click","a.tcdNumber",function(){
                    //    var current = parseInt($(this).text());                //    ms.fillHtml(obj, { "current": current, "pageCount": args.pageCount });                //    if (typeof (args.backFn) == "function") {
                    //        args.backFn(current);                //    }                //});                $(obj).find('.prevPage').off('click').on("click", function () {                    var current = parseInt(obj.children("span.current").text());                    ms.fillHtml(obj, { "current": current - 1, "pageCount": args.pageCount });                    if (typeof (args.backFn) == "function") {                        args.backFn(current - 1);                    }                });                //上一页                //obj.on("click","a.prevPage",function(){
                    //    var current = parseInt(obj.children("span.current").text());                //    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});                //    if(typeof(args.backFn)=="function"){
                    //        args.backFn(current-1);                //    }                //});                $(obj).find('.nextPage').off('click').on("click", function () {                    var current = parseInt(obj.children("span.current").text());                    ms.fillHtml(obj, { "current": current + 1, "pageCount": args.pageCount });                    if (typeof (args.backFn) == "function") {                        args.backFn(current + 1);                    }                });                //下一页                //obj.on("click","a.nextPage",function(){
                    //    var current = parseInt(obj.children("span.current").text());                //    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});                //    if(typeof(args.backFn)=="function"){
                    //        args.backFn(current+1);                //    }                //});            })();        }    }    $.fn.createPage = function (options) {        var args = $.extend({            pageCount: 10,            current: 1,            backFn: function () { }        }, options);        ms.init(this, args);    }})(jQuery);//代码整理：懒人之家 www.lanrenzhijia.com

2、使用方法

2.1 js的应用

首先把jquery.page.js引入

第二js的关键代码

$(".tcdPageCode").createPage({　　pageCount: 总页数,　　current: 当前页,　　backFn: function (p) {　　　　//单击回调方法，p是当前页码　　　　查询方法(p);　　}});

2.2 样式代码

.tcdPageCode {
       padding: 15px 20px;    color: #ccc;    display: inline-block;    padding-left: 0;    margin: 20px 0;    border-radius: 4px;}    .tcdPageCode a {
           display: inline-block;        color: #0D0D0D;        display: inline-block;        height: 25px;        line-height: 25px;        padding: 6px 12px;        border: 1px solid #ddd;        vertical-align: middle;        padding: 6px 12px;        line-height: 1.42857143;        text-decoration: none;    }    .tcdPageCode span.current {
           display: inline-block;        height: 25px;        line-height: 25px;        padding: 6px 12px;        color: #0D0D0D;        background-color: #CCCCCC;        border: 1px solid #ddd;        vertical-align: middle;        line-height: 1.42857143;        text-decoration: none;    }.tcdPageCode-ellipsis {
       display: inline-block;    width: 24px;    text-align: center;}.tcdPageCode span.disabled {
       display: inline-block;    height: 25px;    line-height: 25px;    padding: 6px 12px;    color: #bfbfbf;    background: #f2f2f2;    border: 1px solid #bfbfbf;    border-radius: 4px;    vertical-align: middle;}

 

至于例子，不想写了...