js分页

zhanghh315

浏览: 16794 次
性别:
来自: 长春

最近访客更多访客>>

sha851092391

xhgrid

cjjwzs

gg18662728853

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript jquery kissy

做网站时，遇到需要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})','&nbsp;'+this.opts.page+'&nbsp;');
            this.themeCounter = this.themeCounter.replace('({pageCount})','&nbsp;'+this.opts.pageCount+'&nbsp;');
            
            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+'&nbsp;</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+'&nbsp;</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">&nbsp;'+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">&nbsp;'+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":">"}}}

实际运行的效果如附件

有好的想法欢迎留言