js分页-JavaScript-WEB前端-六狼论坛-IT论坛-计算机论坛

zhanghh315 发表于 2013-1-29 08:39:54

js分页

做网站时，遇到需要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; 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 += ''+this.themeCounter+''; } if (prevPage < 1) { strHtml += ''+opts.themePackage.firstPageTip+''; strHtml += ''+opts.themePackage.prevPageTip+'&nbsp;'; } else { strHtml += '<a>'+opts.themePackage.firstPageTip+'</a>'; strHtml += '<a>'+opts.themePackage.prevPageTip+'&nbsp;</a>'; } if (opts.page != 1 && opts.themePackage.showPageNum == true) strHtml += '<a class="J_page">1</a>'; if (opts.page >= 5 && opts.themePackage.showPageNum == true) strHtml += '...'; 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 += '' + i + ''; }else { if (i != 1 && i != opts.pageCount && opts.themePackage.showPageNum == true) { strHtml += '<a class="J_page">' + i + '</a>'; } } } } if (opts.page + 3 < opts.pageCount && opts.themePackage.showPageNum == true) strHtml += '...'; if (opts.page != opts.pageCount && opts.themePackage.showPageNum == true) strHtml += '<a class="J_page">' + this.opts.pageCount + '</a>'; if (nextPage > opts.pageCount) { strHtml += '&nbsp;'+opts.themePackage.nextPageTip+''; strHtml += ''+opts.themePackage.lastPageTip+''; } else { strHtml += '<a>&nbsp;'+opts.themePackage.nextPageTip+'</a>'; strHtml += '<a>'+opts.themePackage.lastPageTip+'</a>'; } if(opts.themePackage.showJump == true){ strHtml += this.themeJump; } strHtml += ' '; 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); } }); returnPctrl;},{ 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="">

有好的想法欢迎留言

页: [1]

六狼论坛's Archiver

js分页