js(jQuery)原生分页器
说明：
- 引入jQuery插件
- 引入page.js文件（在文章的最后面）
css:
/* 外面盒子样式---自己定义 */
.page_div {
margin: 20px 10px 20px 0;
color: #666
}
/* 页数按钮样式 */
.page_div button {
display: inline-block;
min-width: 30px;
height: 28px;
cursor: pointer;
color: #666;
font-size: 13px;
line-height: 28px;
background-color: #f9f9f9;
border: 1px solid #dce0e0;
text-align: center;
margin: 0 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#firstPage, #lastPage, #nextPage, #prePage {
width: 50px;
color: #0073A9;
border: 1px solid #0073A9
}
#nextPage, #prePage {
width: 70px
}
.page_div .current {
background-color: #0073A9;
border-color: #0073A9;
color: #FFF
}
/* 页面数量 */
.totalPages {
margin: 0 10px
}
.totalPages span, .totalSize span {
color: #0073A9;
margin: 0 5px
}
/*button禁用*/
.page_div button:disabled {
opacity: .5;
cursor: no-drop
}HTML:
<div id="page" class="page_div"></div>关键js代码：
$("#page").paging({
pageNum: 5, // 当前页面
totalNum: 14, // 总页码
totalList: 300, // 记录总数量
callback: function (num) {
//回调函数
console.log(num);
}
});page.js文件：
function Paging(element, options) {
this.element = element;
this.options = {
pageNum: options.pageNum || 1,
totalNum: options.totalNum,
totalList: options.totalList,
callback: options.callback
};
this.init();
}
Paging.prototype = {
constructor: Paging, init: function () {
this.createHtml();
this.bindEvent();
}, createHtml: function () {
var me = this;
var content = [];
var pageNum = me.options.pageNum;
var totalNum = me.options.totalNum;
var totalList = me.options.totalList;
content.push("<button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");
if (totalNum > 6) {
if (pageNum < 5) {
for (var i = 1; i < 6; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
content.push(". . .");
content.push("<button type='button'>" + totalNum + "</button>");
} else {
if (pageNum < totalNum - 3) {
for (var i = pageNum - 2; i < pageNum + 3; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
content.push(". . .");
content.push("<button type='button'>" + totalNum + "</button>");
} else {
content.push("<button type='button'>" + 1 + "</button>");
content.push(". . .");
for (var i = totalNum - 4; i < totalNum + 1; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
}
}
} else {
for (var i = 1; i < totalNum + 1; i++) {
if (pageNum !== i) {
content.push("<button type='button'>" + i + "</button>");
} else {
content.push("<button type='button' class='current'>" + i + "</button>");
}
}
}
content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>");
content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");
content.push("<span class='totalList'> 共" + totalList + " 条记录 </span>");
me.element.html(content.join(''));
setTimeout(function () {
me.dis();
}, 20);
}, bindEvent: function () {
var me = this;
me.element.off('click', 'button');
me.element.on('click', 'button', function () {
var id = $(this).attr('id');
var num = parseInt($(this).html());
var pageNum = me.options.pageNum;
if (id === 'prePage') {
if (pageNum !== 1) {
me.options.pageNum -= 1;
}
} else if (id === 'nextPage') {
if (pageNum !== me.options.totalNum) {
me.options.pageNum += 1;
}
} else if (id === 'firstPage') {
if (pageNum !== 1) {
me.options.pageNum = 1;
}
} else if (id === 'lastPage') {
if (pageNum !== me.options.totalNum) {
me.options.pageNum = me.options.totalNum;
}
} else {
me.options.pageNum = num;
}
me.createHtml();
if (me.options.callback) {
me.options.callback(me.options.pageNum);
}
});
}, dis: function () {
var me = this;
var pageNum = me.options.pageNum;
var totalNum = me.options.totalNum;
if (pageNum === 1) {
me.element.children('#firstPage, #prePage').prop('disabled', true);
} else if (pageNum === totalNum) {
me.element.children('#lastPage, #nextPage').prop('disabled', true);
}
}
};
$.fn.paging = function (options) {
return new Paging($(this), options);
};