傳送門
分頁插件
自我改良
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分頁插件</title>
<link rel="stylesheet" href="./reset.css">
<style>
/* .page-ul {
font-size: 0;
}
.page-ul li {
display: inline-block;
font-size: 14px;
border: 1px solid #ddd;
padding: 5px 10px;
margin: 0 3px;
cursor: pointer;
} */
.page-ul {
margin: 30px auto;
/*width: 433px;*/
text-align: center;
}
.page-ul li a {
float: left;
display: inline-block;
margin-right: 10px;
width: 35px;
height: 35px;
border: 1px solid #ddd;
color: #757575;
text-align: center;
font-size: 14px;
line-height: 35px;
}
.page-ul .page-foot,
.page-ul .page-head,
.page-ul .page-next,
.page-ul .page-prev {
width: 87px;
background: #fff;
color: #757575;
}
.page-ul .page-foot.dis,
.page-ul .page-head.dis,
.page-ul .page-next.dis,
.page-ul .page-prev.dis {
background: #e5e4e2;
color: #fff;
}
.page-ul li a.active {
border: 1px solid #b18247;
color: #b18247;
}
.page-ul .page-submit {
position: relative;
float: left;
/*width: 200px;*/
height: 35px;
line-height: 35px;
}
.page-ul .page-submit input {
width: 30px;
padding: 8px 10px;
margin: 0 5px;
border: 1px solid #ddd;
}
.page-ul .page-submit a {
position: absolute;
margin-right: 0;
margin-left: 10px;
}
</style>
<script src="jquery-1.12.1.min.js"></script>
</head>
<body>
<div id="page_container" style="overflow: hidden;"></div>
<div id="page2" style="overflow: hidden;"></div>
</body>
</html>
<script>
$(function(){
// 分頁類
function Page(data){
var self = this;
this.el = data.el || document.body;
this.pageB = data.pageB || true;
this.pageD = data.pageD || true;
this.pageE = data.pageE || true;
this.current_page = data.current_page || 1; // 當(dāng)前頁
this.total_count = data.pageCount || 10; // 覆蓋總頁數(shù)
if(data.sizeCount && data.pagesize){
// 頁碼數(shù) = 總記錄數(shù) / 每頁顯示數(shù)
this.total_count = Math.ceil(data.sizeCount/data.pagesize);
}
if(data.callback && typeof data.callback == "function"){
this.callback = data.callback; // 指向引用
this.callback(self.current_page);
}
this.init();
}
// 初始化
Page.prototype.init = function(){
this.render();
this.clickEvent();
}
// 渲染dom
Page.prototype.render = function(){
var A = '',B='';C='';D = '',E = '',F = '';
A += '<ul id="page_ul" class="page-ul">';
B += '<li><a href="javascript:;" class="page-head '+this.dis('head')+'">首頁</a></li>'
+ '<li><a href="javascript:;" class="page-prev '+this.dis('prev')+'">上一頁</a></li>';
// 算法在這里 最多5個 ,多的省略號
for(var i = 1; i <= this.total_count; i++){
if(this.total_count < 10){// 12....56789...11_12
C += '<li><a href="javascript:;" class="page-li '+this.active(i)+'">'+i+'</a></li>';
}else{
C += '<li><a href="javascript:;" class="page-li '+this.active(i)+'">'+i+'</a></li>';
}
}
D += '<li><a href="javascript:;" class="page-next '+this.dis('next')+'">下一頁</a></li>'
+ '<li><a href="javascript:;" class="page-foot '+this.dis('foot')+'">尾頁</a></li>';
E += '<li class="page-submit" id="page_submit">跳到<input id="ipt_num" class="ipt-num" type="text" value="'+this.current_page+'" min="1" max="'+this.total_count+'" />頁<a href="javascript:;" class="page-submit">確定</a></li>';
F += '</ul>';
this.el.innerHTML = '';
this.el.innerHTML = A+(this.pageB?B:'')+C+(this.pageD?D:'')+(this.pageE?E:'')+F;
}
// 置灰
Page.prototype.dis = function(str){
if(str == 'prev' || str == 'head'){
return this.current_page > 1 ? '':'dis';
}
return this.current_page<this.total_count?'':'dis';
}
// 按鈕高亮
Page.prototype.active = function(num){
return num == this.current_page ? 'active' : '';
}
// 點(diǎn)擊事件綁定
Page.prototype.clickEvent = function(){
var self = this;
var el = self.el;
var oUl = el.querySelector("#page_ul");
var oInput = el.querySelector("#ipt_num");
oUl.removeEventListener('click',clickBind);
oUl.addEventListener('click',clickBind);
function clickBind(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'a' || target.nodeName.toLowerCase() == 'li'){
var data_li = target.classList; // 判斷class是誰
}else{
return;
}
if(data_li.length > 1){return;} // 如果置灰或者已經(jīng)為激活狀態(tài)return
switch(data_li[0]){
case 'page-prev':
self.current_page--;
break;
case 'page-next':
self.current_page++;
break;
case 'page-head':
self.current_page = 1;
break;
case 'page-foot':
self.current_page = self.total_count;
break;
case 'page-submit':
if(oInput.value <= self.total_count && oInput.value >= 1){
self.current_page = oInput.value;
}
break;
default:
self.current_page = target.innerText; // 防止用戶輸入亂七八雜的
break;
}
self.callback(self.current_page);
self.init(); // 這里加上標(biāo)記變量 防止無限點(diǎn)擊 回調(diào)完成后再來設(shè)置為true
}
// 只允許輸入數(shù)字
oInput.addEventListener("input",function(e){
var regNum = /^\d+$/;
this.value = this.value.replace(/\D/g,'');
});
};
// 初始化
var config = {
el: document.getElementById("page_container"),
pageCount: 10,
pagesize: 20,
sizeCount: 100,
callback: function(res){
console.log(res);
}
};
var config1 = {
el: document.getElementById("page2"),
pageCount: 10,
pagesize: 20,
sizeCount: 100,
current_page: 5,
callback: function(res){
console.log(res);
}
}
var page = new Page(config);
var page2 = new Page(config1);
});
</script>
