JS重构分页
很早以前写过一个Jquery分页组件，但是当时写的组件有个缺点，当时的JS插件是这样设计的：比如：点击 --> 查询按钮 ---> 发ajax请求 返回总页数和所有数据，然后拿到总页数去调用我分页代码，去计算共多少页及显示页码按钮，然后在回调成功后，再接着发Ajax请求，把所有的数据请求回来。这样就有一个缺点，每次点击查询按钮后 会连续发2个AJAX请求，对我们前端性能肯定不友好。所以今天晚上对他们重新封装了下，当然以前的逻辑没有变，只是多加了一个配置项及几行代码，初始化的时候换了一种方式初始化。如下JSFiddle：
JSFiddle地址如下：点击页码，然后使用火狐或者谷歌控制台查看我打印的数据，嘿嘿！
配置参数如下：
所有的JS代码如下：
function Pagination(){ this.config = { container : '', // 页码容器 perPage : 10, // 一页多少条数据 默认情况下10条数据 curIndex : 1, // 当前的索引 从第几开始 itemCount : 100, // 记录总数 默认设为100条 totalPages : 0, // 总页数 buttonAmount : 10, // 每页显示按钮的数量 isAutoClick : true // 上一页 下一页是否封装在里面作为点击 默认为true }; }; Pagination.prototype = { constructor:Pagination, init: function(customConfig,callback){ this.config = $.extend(this.config, customConfig || {}); var _self = this, _config = _self.config; _self._query(callback); return this; }, _query: function(callback){ var _self = this, _config = _self.config; var start, end, html = '', str = ''; _self._calculate(); start = Math.max(1,_config.curIndex - parseInt(_config.buttonAmount/2)); end = Math.min(_config.totalPages,start + _config.buttonAmount - 1); str += '<div class="PagerView">'; // 如果总页数大于1的话 if(_config.totalPages > 1) { if(_config.curIndex != 1) { str += '<a href="javascript://1"><span>|<</span></a>'; str += '<a href="javascript://' + (_config.curIndex-1) + '"><span><<</span></a>'; }else { str += '<span>|<</span>'; str += '<span><<</span>'; } } for(var i = start; i <= end; i+=1) { if(i == _config.curIndex) { str += '<span class="on">' + i + "</span>"; }else { str += '<a href="javascript://' + i + '"><span>' + i + "</span></a>"; } } if(_config.totalPages > 1){ if(_config.curIndex != _config.totalPages){ str += '<a href="javascript://' + (_config.curIndex+1) + '"><span>>></span></a>'; str += '<a href="javascript://' + _config.totalPages + '"><span>>|</span></a>'; }else{ str += '<span>>></span>'; str += '<span>>|</span>'; } } str += ' 一共' + _config.totalPages + '页, ' + _config.itemCount + '条记录 '; str += "</div>"; // 把分页放到容器里面 $(_config.container).html(str); if(_config.isAutoClick){ //点击某一项分页的时候 var a_list = $(_config.container + ' a'); for(var i=0; i<a_list.length; i++){ a_list[i].onclick = function(){ var index = $(this).attr('href'); if(index != undefined && index != ''){ index = parseInt(index.replace('javascript://', '')); _self.click(index,callback); } }; } } return this; }, _getSelectValue: function(select){ var idx = select.selectedIndex, //获取选中的索引 option, value; if(idx > -1) { option = select.options[idx]; //获取选中的option元素 console.log(option); value = option.attributes.value; return (value && value.specified) ? option.value : option.text; } return null; }, click: function(index,callback) { var _self = this, _config = _self.config; _config.curIndex = index; _self._query(callback); callback && $.isFunction(callback) && callback(_config); return this; }, /** * 在显示之前计算各种页码变量的值. */ _calculate: function(){ var _self = this, _config = _self.config; // 计算总页数 = parseInt(Math.ceil(记录总数/每页多少条数据),10) _config.totalPages = parseInt(Math.ceil(_config.itemCount/_config.perPage),10); _self.curIndex = parseInt(_self.curIndex,10); if(_self.curIndex > _config.totalPages) { _self.curIndex = _config.totalPages; } } };
调用的方式如下：
1. 第一种还是原来的初始化方式：也就是 isAutoClick参数默认为true 所有的点击在分页代码内部做了处理，缺点：每次点击查询按钮后 会连续发2次ajax请求。sAutoClick
var pager = new Pagination().init({ container: '#pager' },function(cfg){ console.log(cfg); });
2. 第二种初始化方式 是刚刚新增的，传参isAutoClick false 然后实例化后 接着在外部调用click事件 做其他的事情，如下：
var pager = new Pagination().init({ container: '#pager', isAutoClick: false }); //点击某一项分页的时候 $("#pager").delegate('a','click',function(){ var curIndex = $(this).attr('href'); if(curIndex != undefined && curIndex != ''){ curIndex = parseInt(curIndex.replace('javascript://', '')); pager.click(curIndex,function(cfg){ console.log(cfg); }); } });
第二种方式 优点：点击查询按钮后 只发一次请求 请求成功后 初始化分页代码， 再接着写点击某一页的代码，因为还没有点击 所以一开始时候只请求一次。