JS重构分页
很早以前写过一个Jquery分页组件，但是当时写的组件有个缺点，当时的JS插件是这样设计的：比如：点击 --> 查询按钮 ---> 发ajax请求 返回总页数和所有数据，然后拿到总页数去调用我分页代码，去计算共多少页及显示页码按钮，然后在回调成功后，再接着发Ajax请求，把所有的数据请求回来。这样就有一个缺点，每次点击查询按钮后 会连续发2个AJAX请求，对我们前端性能肯定不友好。所以今天晚上对他们重新封装了下，当然以前的逻辑没有变，只是多加了一个配置项及几行代码，初始化的时候换了一种方式初始化。如下JSFiddle：
JSFiddle地址如下：
配置参数如下：
| container | '', 页码容器 默认为空 必填 |
| perPage | 10, 一页多少条数据 默认情况下10条数据 |
| curIndex | 1, 当前的索引 从第几开始 默认从第一页开始 |
| itemCount | '' , 记录总数 默认为空 必填 开发需要返回的 |
| totalPages | 0, 共多少页 需要开发返回总数进行计算的 |
| buttonAmount | 10, 每页显示按钮的数量 |
| isAutoClick | true, 上一页 下一页是否封装在里面作为点击 默认为true 新增的参数。 |
所有的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 += ' '; // 如果总页数大于1的话 if(_config.totalPages > 1) { if(_config.curIndex != 1) { str += ' |<'; str += ' <<'; }else { str += ' |<'; str += ' <<'; } } for(var i = start; i <= end; i+=1) { if(i == _config.curIndex) { str += ' ' + i + ""; }else { str += ' ' + i + ""; } } if(_config.totalPages > 1){ if(_config.curIndex != _config.totalPages){ str += ' >>'; str += ' >|'; }else{ str += ' >>'; str += ' >|'; } } str += ' 一共' + _config.totalPages + '页, ' + _config.itemCount + '条记录 '; str += " "; // 把分页放到容器里面 $(_config.container).html(str); if(_config.isAutoClick){ //点击某一项分页的时候 var a_list = $(_config.container + ' a'); for(var i=0; i -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); }); }}); 第二种方式 优点：点击查询按钮后 只发一次请求 请求成功后 初始化分页代码， 再接着写点击某一页的代码，因为还没有点击 所以一开始时候只请求一次。