js分页

zhanghh315

    做网站时，遇到需要js分页，网上找来找去，找不到合适的，索性自己写了一个，也不是什么特别高深的东西，拿出来和大家共享下，有好的想法，欢迎与我沟通交流，共勉！
 
 
对以前的分页进行了润色，这里附加例子和截图，亲们可以好好看看
 
 
core.js
 
KISSY.add('plugins/pagination/core', function(S,a,juicer,j,Pctrl) {        var         DOM = S.DOM, get = DOM.get, query = DOM.query, JSON = S.JSON, on = S.Event.on, IO = S.IO,        EMPTY_FUNCTION = function(){},        DEFAULT_THEME_PKG = {            showCounter: true,//定义是否显示分页中的计数部分            themeCounter: '({page})/({pageCount})',//计数部分样式            showJump: true,//定义是否显示分页中的点击按钮跳转部分            themeJump: '跳到第({input})页({button})',            showPageNum: true,//定义是否只需要展示上一页，下一页部分            themeCss: 'J_pagination_theme1',            firstPageTip: '<<',            lastPageTip: '>>',            prevPageTip:'<',            nextPageTip:'>'        }        config = {        renderTo:'',        juicerRender:'',        dataRender:'#J_template',        page: 1,//定义当前页        pageSize: 0,//定义每页显示的记录数        dataCount: 10000,//定义总记录数        pageCount: 0,            themePackageURL: '',//主题包访问地址            themeName: 'default',        type: 'get',        url:'',        extraParam: null,        sendData: function(){},        configUrl: function(url,page,extraParam){},        beforeDataLoad: EMPTY_FUNCTION,        afterDataLoad: EMPTY_FUNCTION,            initCompleted: EMPTY_FUNCTION,//初始化对象完成后的回调函数            beforeSendAJAX: EMPTY_FUNCTION,//获取数据ajax发送之前            errorFun: EMPTY_FUNCTION//ajax发送失败后的回调函数    };    THEME_URL = PW.libUrl + 'js/base/plugins/pagination/style.css';    S.getScript(THEME_URL,{charset:'utf-8'});    var pagination = function(param){        var cfg = S.clone(config);        this.opts = S.mix(cfg,param,true,[],true);        this.init();    };        pagination.prototype = {        /**         * 初始化函数         */        init: function(){            var                that = this,                opts = that.opts;            that.prevPaginationData = null;            that._getThemePackage();            if(opts.initCompleted){                opts.initCompleted();//初始化完成后的函数            }        },        /**         * 重新加载页面，是一个外部方法         * @param  参数param是需要重新加载页面的分页新配置，没有可不写         */        reload: function(param){            this.opts = S.mix(this.opts,param);            this.tDOM.html("");            this.init();        },        /**         * 更新分页显示，是一个外部方法，主要用于在添加或者删除记录的情况下，判断分页的页数是否需要改变         * @param  参数param是需要改变的分页的新配置         */        refresh: function(param){            //更新dataCount            //计算分页            //执行toPage操作            this.opts = S.mix(this.opts,param);            var pageC = Math.ceil(this.opts.dataCount/this.opts.pageSize);            var that = this;            if(pageC != this.opts.pageCount){                that._sendAjax(this.opts.page);            }        },        _getThemePackage:function(){            var                that  = this,                opts  = that.opts,                tPURL = opts.themePackageURL;            if(tPURL && tPURL !== '' && tPURL !== null && tPURL !== undefined){                IO({                    url:tPURL,                    type:'get',                    success:function(tp){                        tp = (S.isString(tp))? S.JSON.parse(tp): tp;                        var themeName;                        if(opts.themeName){                            themeName = opts.themeName;                        }else{                            themeName = 'default';                        }                        that.opts.themePackage = tp.pagination[themeName];                        that.prevPaginationData;                        that.pctrl = new Pctrl(opts);                        that._sendAjax(opts.page);                    },                    error:function(a,b,c){                        S.log('主题包获取失败,直接使用默认配置！');                        opts.themePackage = DEFAULT_THEME_PKG;                        that.prevPaginationData;                        that.pctrl = new Pctrl(opts);                        that._sendAjax(opts.page);                    }                });            }else{                opts.themePackage = DEFAULT_THEME_PKG;                that.prevPaginationData;                that.pctrl = new Pctrl(opts);                that._sendAjax(opts.page);            }        },        _sendAjax: function(page){            var                that = this,                opts = that.opts,                URL;            if(!opts.timeout || opts.timeout == undefined || opts.timeout == '' || opts.timeout == null){                opts.timeout = 10;            }            IO({                type: opts.type,                url: opts.configUrl(that.opts.url,that.opts.page,that,that.prevPaginationData),                data: opts.extraParam,                timeout: opts.timeout,                /*beforeSend: function(){                    if(opts.beforeSendAJAX){                        opts.beforeSendAJAX(that);                    }                },*/                success: function(data){                    /*URL = opts.configUrl(that.opts.url,that.opts.page,that,that.prevPaginationData);                    that.fire('beforeDataLoad',{url:URL,data:opts.extraParam});*/                    data = (S.isString(data)) ? S.JSON.parse(data): data;                    if(opts.beforeDataLoad){                        opts.beforeDataLoad(that,data);                    }                    that.opts.sendData(that,data);                    S.log(data);                    //如果后台传dataCount过来就将传来的值指定给当前分页的dataCount                    //如果没有传值，则使用默认的配置值                    if(data.dataCount !== null && data.dataCount !== '' &&data.dataCount !== undefined){                        opts.dataCount = data.dataCount;                    }                    opts.pageCount = Math.ceil(opts.dataCount/opts.pageSize);                    var tpl = document.getElementById(opts.juicerRender).innerHTML;                    that.prevPaginationData = data;                    var html = juicer(tpl, data);                    DOM.html(opts.dataRender,html);                    DOM.html(opts.renderTo,'');                    that.pctrl.refresh(opts.dataCount,page);                    that._pageClick();                    if(opts.afterDataLoad){                    opts.afterDataLoad(that);                    }                },                error: function(){                    alert('获取数据失败！');                    if(opts.errorFun){                        opts.errorFun(that);                    }                }            });                    },        _pageClick:function(){                        //绑定click事件            var                 that = this,                opts = that.opts;            that.tDOM = $(opts.renderTo);            //点击首页            that.tDOM.find('#J_firstPage').click(function(){                if(!($(this).hasClass('disabled'))){                    opts.page = 1;                    that._sendAjax(opts.page);                }            });            //点击上一页            that.tDOM.find('#J_prevPage').click(function(){                if(!($(this).hasClass('disabled'))){                    opts.page = opts.page - 1;                    that._sendAjax(opts.page);                }            });            //点击下一页            that.tDOM.find('#J_nextPage').click(function(){                if(!($(this).hasClass('disabled'))){                    opts.page = opts.page + 1;                    that._sendAjax(opts.page);                }            });            //点击尾页            that.tDOM.find('#J_lastPage').click(function(){                if(!($(this).hasClass('disabled'))){                    opts.page = opts.pageCount;                    that._sendAjax(opts.page);                }            });            //点击指定的页码            that.tDOM.find(".J_page").each(function(){                if(!($(this).hasClass('check'))){                    $(this).click(function(){                        var val = $(this).children('span').text();                        opts.page = parseInt(val);                        that._sendAjax(opts.page);                    });                }                            });            //点击按钮进行跳转            that.tDOM.find('.J_btnGo').click(function(){                if($(this).prev('#pageNum').val() && $(this).prev('#pageNum').val() !== '' && $(this).prev('#pageNum').val() !== null){                    var p = $(this).prev('#pageNum').val();                    p = parseInt(p);                    if(p > that.opts.pageCount){                        opts.page = opts.pageCount;                    }else if(p < 1){                        opts.page = 1;                    }else if(isNaN(p)){                        opts.page = 1;                    }else{                        opts.page = p;                    }                    that._sendAjax(opts.page);                }            });        },        _toPage: function(page){            page           = parseInt(page);            this.opts.page = page;            this.tDOM.html("");            this.pctrl.refresh(this.opts.dataCount,this.opts.page);        }    }    return pagination; }, {    requires : ['thirdparty/jquery','plugins/juicer','core','pagination/Pctrl']});KISSY.add('pagination/Pctrl',function(S){    var        DOM = S.DOM, get = DOM.get, query = DOM.query, JSON = S.JSON, on = S.Event.on, io = S.io,        config = {            renderTo:'',            pageSize: 10,            showCounter: true,            showJump: true,            showPageNum: true,            themePackage: {                         //当前分页的主题包                themeCss: 'J_pagination_theme1',                showCounter: true,//定义是否显示分页中的计数部分                themeCounter: 'Page({page})of({pageCount})',//计数部分样式                showJump: true,//定义是否显示分页中的点击按钮跳转部分                themeJump: '跳到第({input})页({button})',                showPageNum: true,//定义是否只需要展示上一页，下一页部分                firstPageTip: '<<',                lastPageTip: '>>',                prevPageTip:'<',                nextPageTip:'>'            }        };    function Pctrl(param){        this.opts = S.mix(config,param,true,[],true);        this.page = 1;    }    S.augment(Pctrl,S.EventTarget);    S.augment(Pctrl,{        _init:function(){},        refresh: function(dataCount,page){            //计算页数，然后根据页数获取html            var                that = this,                opts = that.opts;            opts.dataCount = dataCount;            opts.pageCount = Math.ceil(opts.dataCount/opts.pageSize);            that._checkPage(page);            var html = that._generateHTML(page);            var d = $(this.opts.renderTo).append(html);            $(this.opts.renderTo).addClass(opts.themePackage.themeCss);            that._addEvt(d);        },                _addEvt: function(html){            this._checkPage();            d = DOM.create(html);            return d;        },        /**         * 配置处理函数，对配置项里面的主题配置进行处理，提取出需要的内容         */        _configHandel:function(){            var                that = this,                opts = that.opts;            this.themeCounter = opts.themePackage.themeCounter;            this.themeCounter = this.themeCounter.replace('({page})',' '+this.opts.page+' ');            this.themeCounter = this.themeCounter.replace('({pageCount})',' '+this.opts.pageCount+' ');                        this.themeJump    = opts.themePackage.themeJump;            this.themeJump    = this.themeJump.replace('({input})','<input type="text" id="pageNum" name="pageNum" class="goTo" value="" />');            this.themeJump    = this.themeJump.replace('({button})','<button class="J_btnGo">go</button>');        },        /**         * 拼装分页html         */        _generateHTML: function(page){ //            var                strHtml = '',                opts = this.opts,                endPage = 0;            opts.page = page;            var                prevPage = parseInt(opts.page) - 1,                nextPage = parseInt(opts.page) + 1;            this._configHandel();            if(opts.themePackage.showCounter == true){                strHtml += '<span class="count">'+this.themeCounter+'</span>';            }            if (prevPage < 1) {                strHtml +=                     '<span id="J_firstPage" class="firstPage disabled" title="First Page">'+opts.themePackage.firstPageTip+'</span>';                strHtml +=                     '<span id="J_prevPage" class="prevPage disabled" title="Prev Page">'+opts.themePackage.prevPageTip+' </span>';            } else {                strHtml +=                     '<a><span id="J_firstPage" title="First Page">'+opts.themePackage.firstPageTip+'</span></a>';                strHtml +=                     '<a><span id="J_prevPage" title="Prev Page">'+opts.themePackage.prevPageTip+' </span></a>';            }            if (opts.page != 1 && opts.themePackage.showPageNum == true) strHtml += '<a class="J_page"><span title="Page 1">1</span></a>';            if (opts.page >= 5 && opts.themePackage.showPageNum == true) strHtml += '<span class="until">...</span>';            if (opts.pageCount > opts.page + 2) {                endPage = opts.page + 2;            } else {                endPage = opts.pageCount;            }            for (var i = opts.page - 2; i <= endPage; i++) {                if (i > 0) {                    if (i == opts.page && opts.themePackage.showPageNum == true) {                        strHtml += '<span title="Page ' + i + '" class="check">' + i + '</span>';                    }else {                        if (i != 1 && i != opts.pageCount && opts.themePackage.showPageNum == true) {                            strHtml += '<a class="J_page"><span title="Page ' + i + '">' + i + '</span></a>';                        }                    }                }            }            if (opts.page + 3 < opts.pageCount && opts.themePackage.showPageNum == true) strHtml += '<span class="until">...</span>';            if (opts.page != opts.pageCount && opts.themePackage.showPageNum == true) strHtml += '<a class="J_page"><span title="Page ' + this.opts.pageCount + '">' + this.opts.pageCount + '</span></a>';            if (nextPage > opts.pageCount) {                strHtml += '<span id="J_nextPage" class="nextPage disabled" title="Next Page"> '+opts.themePackage.nextPageTip+'</span>';                strHtml += '<span id="J_lastPage" class="lastPage disabled" title="Last Page">'+opts.themePackage.lastPageTip+'</span>';             } else {                strHtml += '<a><span id="J_nextPage" title="Next Page"> '+opts.themePackage.nextPageTip+'</span></a>';                strHtml += '<a><span id="J_lastPage" title="Last Page">'+opts.themePackage.lastPageTip+'</span></a>';             }            if(opts.themePackage.showJump == true){                strHtml += this.themeJump;            }            strHtml += '<br/>';            if(opts.pageCount <= 1){                strHtml = '';            }            return strHtml;        },        /**         * 对当前页数和总页数进行验证         */        _checkPage: function(){            var                opts = this.opts;            //当前页数为非数字，则当前页数置为1            if (isNaN(parseInt(opts.page))) opts.page = 1;            //总页数为非数字，则将总页数置为1            if (isNaN(parseInt(opts.pageCount))) opts.pageCount = 1;            if (opts.page < 1) opts.page = 1;            if (opts.pageCount < 1) opts.pageCount = 1;            if (opts.page > opts.pageCount) opts.page = opts.pageCount;            opts.page = parseInt(opts.page);            opts.pageCount = parseInt(opts.pageCount);        }           });         return  Pctrl;  },{    requires:['core','thirdparty/jquery']});   
 
pagination.js
 
 
KISSY.add('mod/pagination',function(S,pagination){        PW.pagination = function(param){        return new pagination(param);    }    },{requires:['plugins/pagination/core']}); 
 
pagination.html
 
<script type="text/javascript">        KISSY.use('plugins/pagination/core', function(S,pagination) {            S.ready(function(){                var p = new pagination({    renderTo: '#J_pagination',//分页显示指向    juicerRender: 'tpl',//模版渲染指向    dataRender: '#J_template',    pageSize: 5,//每页显示的记录数    dataCount: 50,//总记录数    themePackageURL: PW.libUrl+'js/base/plugins/pagination/theme/theme.json',    themeName: 'a',//主题名称,有default,a,b,c,d,e这几种，默认是default    url:'data.json',//必选，必须指定ajax的url    type: 'get',//可选，默认情况下是get    extraParam: {},//获取分页数据列表的额外条件    sendData: function(me,b){}, //回调函数 me指向当前的分页对象，b指向分页获取的json数据    configUrl:function(url,page,me,prevdata){//url:配置的url,page:当前的页面,me:指向当前分页,prevdata:上一次的分页数据    //var url = url+'/page/'+page+'/'+me.opts.extraParam.fromDate+'/'+me.opts.extraParam.toDate;    return url;    },    //初始化完成之后的回调函数    initCompleted:function(me){    S.log('初始化完成！');    },    //发送ajax之前    beforeSendAJAX:function(me){    S.log('发送ajax之前！');    },    //ajax发送失败后的回调函数    errorFun:function(me){    S.log('ajax发送失败！');    },    beforeDataLoad:function(me,data){    }  });            });        });    </script>   
主题包设置：
 
{"pagination":{"default":{"showCounter":true,"themeCounter":"Page({page})of({pageCount})","showJump":true,"themeJump":"跳到第({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme1","firstPageTip":"首页","lastPageTip":"尾页","prevPageTip":"<","nextPageTip":">"},"a":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":"  goto({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme5","firstPageTip":"首页","lastPageTip":"尾页","prevPageTip":"<","nextPageTip":">"},"b":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":false,"themeJump":"跳到第({input})页({button})","showPageNum":false,"themeCss":"J_pagination_theme2","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"},"c":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":"  跳到第({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme3","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"},"d":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":"  goto({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme4","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"},"e":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":"  goto({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme4","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"}}}  
 
实际运行的效果如附件
 
<img alt="">
<img alt="">
 
有好的想法欢迎留言