脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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(){
container : '', // 页码容器
perPage : 10, // 一页多少条数据 默认情况下10条数据
curIndex : 1, // 当前的索引 从第几开始
itemCount : 100, // 记录总数 默认设为100条
totalPages : 0, // 总页数
buttonamount : 10, // 每页显示按钮的数量
isAutoClick : true // 上一页 下一页是否封装在里面作为点击 默认为true
};
};
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 += '<p 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 += "</p>";
// 把分页放到容器里面
$(_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);
});
}
});
复制代码
第二种方式 优点：点击查询按钮后 只发一次请求 请求成功后 初始化分页代码， 再接着写点击某一页的代码，因为还没有点击 所以一开始时候只请求一次。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS重构分页全部内容，希望文章能够帮你解决javascript代码实例教程-JS重构分页所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。