效果图：
js代码：
/*
2017-08-25 create By wqq.
使用说明：
1.导入wqqpage.css文件
2.导入wqqpage.js文件
3、 var page = new PagePlug(容器元素,{
totalPages:总页数
liNums:每页显示的页数
activeColor:点击之后的按钮
firstPage:首页按钮的文本
lastPage:末页按钮的文本
pre:上一页按钮的文本
next:下一页按钮的文本
})
*/
function PagePlug(container,options){
this.container = container;
// 属性
this.totalPages = options.totalPages||9;//总页数
this.liNums = options.liNums || 9;//分页的数字按钮数(建议取奇数)
this.activeColor = options.activeColor || 'orange' ,//默认颜色
this.firstPage = options.firstPage || '首页',//首页按钮名称
this.lastPage = options.lastPage || '末页',//末页按钮名称
this.pre = options.pre || '«',//前一页按钮名称
this.next = options.next || '»',//后一页按钮名称
this.callBack = options.callBack;
this.currentPage = 1;
this.btnArr = [];
this.pageBtnArr = [];
this.firstPageDiv = null;
this.preDiv = null;
this.lastPageDiv = null;
this.nextDiv = null;
this.initPage();
}
// 创建分页样式
PagePlug.prototype.initPage = function(){
// 保存下this在各个按钮的点击事件中使用
var pageP = this;
// 创建首页
this.firstPageDiv = document.createElement("div");
this.firstPageDiv.innerText = this.firstPage;
this.firstPageDiv.className = "pageBtn";
this.container.appendChild(this.firstPageDiv);
this.btnArr.push( this.firstPageDiv );
// 刚开始首页是处于隐藏的状态
this.firstPageDiv.style.display = "none";
this.firstPageDiv.onclick = function(){
pageP.currentPage = 1;
pageP.currentPageStyle();
pageP.callBack(1);
}
// 创建上一页
this.preDiv = document.createElement("div");
this.preDiv.innerText = this.pre;
this.preDiv.className = "pageBtn";
this.container.appendChild(this.preDiv);
//刚开始上一页也是处于隐藏的状态
this.preDiv.style.display = "none";
this.btnArr.push( this.preDiv );
this.preDiv.onclick = function(){
if (pageP.currentPage == 1) {
return;
};
pageP.currentPage -- ;
pageP.currentPageStyle();
pageP.callBack(pageP.currentPage);
}
// 创建页数按钮
for (var i = 0; i < this.liNums; i++) {
var pageDiv = document.createElement("div");
pageDiv.innerText = i+1;
pageDiv.className = "pageBtn";
if (i==0) {
pageDiv.style.background = this.activeColor;
};
this.container.appendChild(pageDiv);
this.btnArr.push( pageDiv );
this.pageBtnArr.push(pageDiv);
pageDiv.onclick = function(){
pageP.currentPage = Number( this.innerText );
pageP.callBack(this.innerText);
pageP.currentPageStyle();
}
};
// 创建下一页
this.nextDiv = document.createElement("div");
this.nextDiv.innerText = this.next;
this.nextDiv.className = "pageBtn";
this.container.appendChild(this.nextDiv);
this.btnArr.push( this.nextDiv );
this.nextDiv.onclick = function(){
if (pageP.currentPage >= pageP.totalPages ) {
return;
};
pageP.currentPage ++ ;
pageP.currentPageStyle();
pageP.callBack( pageP.currentPage );
}
// 创建末页
this.lastPageDiv= document.createElement("div");
this.lastPageDiv.innerText = this.lastPage;
this.lastPageDiv.className = "pageBtn";
this.container.appendChild(this.lastPageDiv);
// 刚开始 末页处于隐藏状态
this.lastPageDiv.style.display = "none";
this.btnArr.push( this.lastPageDiv );
this.lastPageDiv.onclick = function(){
pageP.currentPage = pageP.totalPages ;
pageP.currentPageStyle();
pageP.callBack(pageP.currentPage);
}
}
// 根据当前点击的页数 决定分页插件显示的值
PagePlug.prototype.currentPageStyle = function(){
// currentPage = 1
// currentPage 1 消失了 parseInt( liNum/2 )
// curentPage现在不是1
if (this.currentPage == 1) {
this.firstPageDiv.style.display = "none";
this.preDiv.style.display = "none";
this.nextDiv.style.display = "block";
this.lastPageDiv.style.display = "none";
// 页码从1开始显示到liNums
for (var i = 0; i < this.pageBtnArr.length; i++) {
this.pageBtnArr[i].innerText = (i+1);
};
}else if(this.currentPage <= parseInt(this.liNums/2)){
// 上一页出现
this.firstPageDiv.style.display = "none";
this.preDiv.style.display = "block";
this.nextDiv.style.display = "block";
this.lastPageDiv.style.display = "none";
// 页码从1开始显示到liNums
for (var i = 0; i < this.pageBtnArr.length; i++) {
this.pageBtnArr[i].innerText = (i+1);
};
}else if(this.currentPage <= this.totalPages - this.liNums/2){
this.firstPageDiv.style.display = "block";
this.preDiv.style.display = "block";
this.nextDiv.style.display = "block";
this.lastPageDiv.style.display = "none";
// 当前页面的值大于中间按钮的值时，需要改变数字按钮的html
for (var i = 0; i < this.pageBtnArr.length; i++) {
this.pageBtnArr[i].innerText = this.currentPage - parseInt(this.liNums/2)+1+i;
};
}else if (this.currentPage < this.totalPages ) {
this.firstPageDiv.style.display = "block";
this.preDiv.style.display = "block";
this.nextDiv.style.display = "block";
this.lastPageDiv.style.display = "block";
for (var i = this.totalPages-this.liNums+1 ; i >= this.totalPages; i++) {
// console.log("i--------" + i);
this.pageBtnArr[i-(this.totalPages-this.liNums+1)].innerText = i;
};
}else{
this.firstPageDiv.style.display = "block";
this.preDiv.style.display = "block";
this.nextDiv.style.display = "none";
this.lastPageDiv.style.display = "none";
}
for (var i = 0; i < this.pageBtnArr.length; i++) {
if( this.pageBtnArr[i].innerText == this.currentPage ){
this.pageBtnArr[i].style.background = this.activeColor;
}else{
this.pageBtnArr[i].style.background = "#fff";
}
};
}
css代码：
/可以通过修改此处的样式来改变自己的分页插件/
.pageBtn{
font-size: 16px;
min-width: 40px;
padding: 5px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
float: left;
margin-right: 30px;
}
测试案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" type="text/css" href="wqqpage.css">
<script type="text/javascript" src="wqqpage.js"></script>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
<script type="text/javascript">
var page = new PagePlug(test,{
totalPages:20,
liNums:10,
firstPage:"test的首页",
pre:"上一页",
activeColor:"red",
callBack:function(page){
console.log("test--------" + page);
}
})
var page2 = new PagePlug(test2,{
totalPages:30,
liNums:9,
callBack:function(page){
console.log("test2---------" + page);
}
})
</script>
</body>
</html>
