javascript - jquery分页代码及算法如何优化
本文介绍了javascript - jquery分页代码及算法如何优化的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
自己写了个分页的函数,总感觉算法及函数写的很别扭。希望各路大神过来指点迷津一番,看看怎么整个优雅的函数出来,万分感激。欢迎大家来拍砖交流,相互学习。
page<9:
page>=9 {
1-4页且pageTotal>9:
page>4且pageTotal-page>=4:
page>4且pageTotal-page<4:
}
function pagination(options){
var defaults = {
page:1,
pageNum:10,
pageTotal:10,
url:''
};
var options = $.extend({},defaults,options),
dom_content = '',
page = options.page,//当前页
url = options.url,//连接
total = options.pageTotal,//总页数
prevPage,
nextPage;
if(page === 1){
prevPage = '<a class="page_on prev_disable">上一页</a>';
}else{
prevPage = '<a href='+url+'/'+Number(page-1)+' class="page_on">上一页</a>';
}
if(page === total){
nextPage = '<a class="page_on next_disable">下一页</a>';
}else{
nextPage = '<a href='+url+'/'+Number(page+1)+' class="page_on">下一页</a>';
}
if(total<9){
for(var i= 1;i<=total;i++){
var className = i==page?"active":" ";
dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
}
}else{
if(page<=4){
for(var i= 1;i<7;i++){
var className = i==page?"active":" ";
dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
};
dom_content +=' ...'+ ' <a href='+url+'/'+total+' class="page_on">'+total+'</a>';
}else if(page>4&&Number(total-page)>=4){
dom_content += '<a href='+url+'/1' + ' class="page_on">1</a> ' + '... ';
for(var i= Number(page-2);i<Number(page+3);i++){
var className = i==page?"active":" ";
dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
};
dom_content+=' ...'+' <a href='+url+'/'+total+' class="page_on">'+total+'</a>';
}else if(page>4&&Number(total-page)<4){
dom_content += '<a href='+url+'/1' + ' class="page_on">1</a> ' + '... ';
for(var i= Number(total-5);i<=total;i++){
var className = i==page?"active":" ";
dom_content += '<a href='+url+'/'+i+' class="page_on '+className+'">'+i+'</a>';
};
}
}
var dom =
$('<div class="pagination_wrapper">'+
prevPage+
dom_content+
nextPage+
'</div>');
return dom;
}
解决方案
既然是用 jQuery,何必再自己拼 HTML 呢,jQuery 的 DOM 处理能力很强的。另外,除 prev 和 next 之外,其它的相对有规律,可以先生成数据数组,再来生成 DOM,也就是 M -> V
的思想。
代码我没测试,所以可能会有些小问题。
function pagination(options) {
var defaults = {
page: 1,
pageNum: 10,
pageTotal: 10,
url: ""
};
var options = $.extend({}, defaults, options),
dom_content = "",
page = options.page,//当前页
url = options.url,//连接
total = options.pageTotal,//总页数
prevPage,
nextPage;
function createPageButton(page, isActive, text) {
return $("<a>").text(text || page)
.addClass("page_on")
.addClass(isActive ? "active" : "")
.attr("href", url + "/" + page);
}
var $prev = page === 1
? createPageButton(null, false, "上一页")
.addClass("prev_disable")
.removeAttr("href")
: createPageButton(page - 1, false, "上一页");
var $next = page === total
? createPageButton(null, false, "下一页")
.addClass("next_disable")
.removeAttr("href")
: createPageButton(page + 1, false, "下一页");
var pages = [];
if (total < 9) {
pages = [1, 2, 3, 4, 5, 6, 7, 8, 9];
} else if (page <= 4) {
pages = [1, 2, 3, 4, 5, 6, 0, total];
} else if (pageTotal - page >= 4) {
pages = [1, 0, page - 2, page - 1, page, page + 1, page + 2, 0, total];
} else {
pages = [1, 0, total - 5, total - 4, total - 3, total - 2, total - 1, total];
}
$pageButtons = pages.map(function(n) {
return n
? createPageButton(n, n === page)
: " ... ";
});
return $("<div>").addClass("pagination_wrapper")
.append($prev)
.append($pageButtons)
.append($next);
}
这篇关于javascript - jquery分页代码及算法如何优化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文