最近做了个项目,有用到分页, 这类插件应该是很常用的, 虽然网上很多现成的分页插件, 但是还是想着自己写一个, 给自己积累点东西, 顺便练练手, 写了差不多3个小时左右, 代码如下:
代码:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页插件</title>
<style type="text/css">
body{padding: 0px; margin: 0px;}
.content{width: 980px; margin: 0 auto; padding-top: 50px;}
ul{margin:0px; padding:0px;}
ul li{margin:0px; padding:0px; list-style:none; float:left;}
</style>
</head>
<body>
<div class="content">
<p>当前页: <input type="text" id="txtPageIndex" /></p>
<p>总页数: <input type="text" id="txtPageCount" /></p>
<p><button id="btnSubmit">submit</button></p>
<br />
<br /> <p>输出:</p>
<div id="pageBox"> </div>
</div> <script type="text/javascript">
function byID(id){
return document.getElementById(id);
} var ui = {};
ui.btnSubmit = byID('btnSubmit');
ui.txtPageIndex = byID('txtPageIndex');
ui.txtPageCount = byID('txtPageCount');
ui.pageBox = byID('pageBox'); ui.btnSubmit.onclick = function(){
var pageIndex = ui.txtPageIndex.value;
var pageCount = ui.txtPageCount.value; var options = {
pageIndex: parseInt(pageIndex),
pageCount: parseInt(pageCount),
container: ui.pageBox
}; if(options.pageCount > 0){
var page = new pagination(options);
page.init();
}else{
alert('总页数不能小于0');
} }; function pagination(options){
this.pageIndex = options.pageIndex || 1;
this.pageCount = options.pageCount;
this.showPage = options.showPage || 3;
this.container = options.container;
} pagination.prototype = {
init: function(){
/*初始化检查当前页是否合理*/
this.pageIndex = this.pageIndex < 1 ? 1 : this.pageIndex;
this.pageIndex = this.pageIndex > this.pageCount ? this.pageCount : this.pageIndex; /*渲染UI*/
this.render();
},
render: function(){
var pageList, setting; pageList = [];
setting = this.getSetting(this.pageIndex);
pageList.push('<ul class="pagination">'); if(this.pageIndex > 1){
pageList.push('<li><button value="' + setting.prev + '">上一页</button></li>'); if(setting.start > 1){
pageList.push('<li><button value="1">1</button></li>');
} if(setting.start > 2){
pageList.push('<li>...</li>');
}
}else{
pageList.push('<li><button value="1" disabled="disabled">上一页</button></li>');
} for (var i = setting.start; i <= setting.end; i++) {
if(i == this.pageIndex){
pageList.push('<li><button value="' + i + '" disabled="disabled">' + i + '</button></li>');
}else{
pageList.push('<li><button value="' + i + '">' + i + '</button></li>');
}
}; if(this.pageIndex < this.pageCount){
if(setting.end < this.pageCount){
if(setting.end < (this.pageCount - 1)){
pageList.push('<li>...</li>');
} pageList.push('<li><button value="' + this.pageCount + '">' + this.pageCount + '</button></li>');
} pageList.push('<li><button value="' + setting.next + '">下一页</button></li>');
}else{
pageList.push('<li><button value="' + this.pageCount + '" disabled="disabled">下一页</button></li>');
} pageList.push('</ul>');
this.container.innerHTML = pageList.join('\n');
this.regEvent();
},
regEvent: function(){
/*事件注册*/
var _this = this;
var button = this.container.getElementsByTagName('button'); for(var i = 0; i < button.length; i++){
button[i].onclick = function(){
_this.change(parseInt(this.value));
};
}
},
change: function(index){
/*当前页改变时触发*/
this.pageIndex = index;
this.render();
this.onChange(index);
},
getSetting: function(index){
var start, end, prev, next, s, e; s = 0;
e = 0; start = index - this.showPage;
end = index + this.showPage; if(start < 1){
s = Math.abs(start) + 1;
start = 1;
} if(end > this.pageCount){
e = end - this.pageCount;
end = this.pageCount;
} if(s > 0 && e <= 0){
e = s + end;
end = e > this.pageCount ? this.pageCount : e;
}else if(e > 0 && s <= 0){
s = start - e;
start = s < 1 ? 1: s;
} prev = index > start ? index - 1 : 1;
next = index < end ? index + 1 : end; /*核心算法, 根据当前页计算出显示的起始页和截止页, 上一页, 下一页 这些数据*/
return {start: start, end: end, prev: prev, next: next};
},
onChange: function(index){
/*空函数, 可覆盖*/
console.log(index);
}
}; </script>
</body>
</html>