分页模块
摘要：其中表示总的页码数，效果如下图效果图如下二代码部分部分首页上一页下一页尾页函数调用上下文，默认情况下为部分三使用示例模板页面控制器首先初始化然后在渲染和俩函数的参数见代码部分注释
一 功能描述
先贴上最终的效果图：
首页/尾页/上一页/下一页 的功能就不用我具体解释了吧：）
中间固定显示11个页码（这个数字是用下面代码中的常量DISPLAY_NUM决定的），根据点击的页码数字 a ，分页的变化情况有三种：
(1) 1 <=a <= 5 ，显示效果如上图所示。
(2) 6 <=a <= l-4, 其中l表示总的页码数，效果如下图：
(3) l-4 <=a <= l, 效果图如下：
二 代码
html 部分
js 部分
define([],function(){
var tpl = "<首页
<上一页
{{#total_arr}}
{{num}}
{{/total_arr}}
下一页>
尾页> ",
default_event_handlers = {
to_page: function (e, cur) {
return true;
},
prev_page: function (e, cur) {
return true;
},
next_page: function (e, cur) {
return true;
},
first_page: function (e, cur) {
return true;
},
last_page: function (e, cur) {
return true;
}
},
DISPLAY_NUM = 11,
pages = {
/**
*
* @param {type} opt
* {
* wrp
* that: event_handlers函数调用上下文，默认情况下为this
* events: {
"to_page": function(event, cur){},
"prev_page": function(evnet, cur){},
"next_page": function(event, cur){},
"first_page": function(event, cur){},
"last_page": function(event, cur){},
}
* }
* @returns {undefined}
*/
init: function(opt){
var event_handlers = $.extend({}, default_event_handlers, opt.events),
_this = opt.that||this,
_that = this;
$(opt.wrp).on("click", ".pages .prev-page", function(e){
var before_p = $(this).closest(".pages").find(".cur").data("value"),
total_p = $(this).siblings(".last-page").data("value");
before_p = parseInt(before_p);
total_p = parseInt(total_p);
if (before_p == 1) {
return;
}
var cur = before_p - 1;
event_handlers.prev_page.call(_this, e, cur);
_that.render(cur, total_p);
}).on("click", ".pages .next-page", function(e){
var before_p = $(this).closest(".pages").find(".cur").data("value"),
total_p = $(this).next().data("value");
before_p = parseInt(before_p);
total_p = parseInt(total_p);
if (before_p == total_p) {
return;
}
var cur = before_p + 1;
event_handlers.next_page.call(_this, e, cur);
_that.render(cur, total_p);
}).on("click", ".pages .num", function(e){
var before_p = $(this).closest(".pages").find(".cur").data("value"),
total_p = $(this).siblings(".last-page").data("value"),
cur = $(this).data("value");
before_p = parseInt(before_p);
total_p = parseInt(total_p);
cur = parseInt(cur);
if (before_p == cur) {
return;
}
event_handlers.to_page.call(_this, e, cur);
_that.render(cur, total_p);
}).on("click", ".pages .first-page", function(e){
var before_p = $(this).closest(".pages").find(".cur").data("value"),
total_p = $(this).siblings(".last-page").data("value");
before_p = parseInt(before_p);
total_p = parseInt(total_p);
if (before_p == 1) {
return;
}
var cur = 1;
event_handlers.first_page.call(_this, e, cur);
_that.render(cur, total_p);
}).on("click", ".pages .last-page", function(e){
var before_p = $(this).closest(".pages").find(".cur").data("value"),
total_p = $(this).data("value");
before_p = parseInt(before_p);
total_p = parseInt(total_p);
if (before_p == total_p) {
return;
}
var cur = total_p;
event_handlers.last_page.call(_this, e, cur);
_that.render(cur, total_p);
});
},
/**
*
* @param {type} opt
* total
* cur
* @returns {undefined}
*/
render: function(cur, total){
if (total == 0) {
$(".pages").html("");
return;
}
var total_arr = this.set_total_array(total, cur),
prev_d = (cur == 1) ? "disabled" : "",
next_d = (cur == total) ? "disabled" : "",
content = Mustache.render(tpl, {
prev_d: prev_d,
next_d: next_d,
total_value: total,
total_arr: total_arr
});
$(".pages").html(content);
},
set_total_array: function(total, current){
var total_arr = [],
begin_index = 1,
end_index = total,
begin_threshold = Math.floor(DISPLAY_NUM/2),
end_threshold = total + 1 - begin_threshold;
if (total <= DISPLAY_NUM) {
end_index = total;
} else if (current <= begin_threshold) {
end_index = DISPLAY_NUM;
} else if (current >= end_threshold) {
begin_index = total + 1 - DISPLAY_NUM;
} else {
begin_index = current - begin_threshold;
end_index = current + begin_threshold;
}
for (var i = begin_index; i <= end_index; i++) {
var item = {num: i, value: i};
if (current == i) {
item.cur = "cur";
}
total_arr.push(item);
}
return total_arr;
},
};
return pages;
});
css 部分
.pages{
text-align: center;
padding: 20px 0;
.prev,.next {
width: auto;
background: transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a{
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 3px;
text-align: center;
color: #333;
font-size: 14px;
vertical-align: top;
margin-right: 15px;
}
.cur{
background-color: #3b9bf5;
color: white;
text-decoration: none;
cursor: default;
}
.omit{
margin: 0;
}
.clear-margin{
margin-left: -15px;
}
.disabled{
opacity: 0.6;
}
}
三 使用示例
模板页面
控制器
首先初始化：
然后在渲染：
init和render俩函数的参数见js代码部分注释
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83264.html
