共计 5091 个字符，预计需要花费 13 分钟才能阅读完成。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title></title>
<style>
/* 外面盒子样式 — 自己定义 */
.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}
</style>
</head>
<body ontouchstart=”” onmousemove=””>
<div value=”1 0″></div>
<div id=”page” class=”page_div”></div>
</body>
<script src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/page1Me.js”></script>
<script>
$(“#page”).paging({
// pageNo: 18,
// totalPage: 20,
// totalSize: 300,
pageNum: 5,
totalNum: 14,
totalList: 300,
callback: function (num) {
console.log(num);
}
});
// 模拟 ajax 数据用以下方法，方便用户更好的掌握用法
// 参数为当前页
// ajaxTest(1);
// function ajaxTest(num) {
// $.ajax({
// url: “table.json”,
// type: “get”,
// data: {},
// dataType: “json”,
// success: function(data) {
// console.log(data);
// // 分页
// $(“#page”).paging({
// pageNo: num,
// totalPage: data.totalPage,
// totalSize: data.totalSize,
// callback: function(num) {
// ajaxTest(num)
// }
// })
// }
// })
// }
</script>
</html>
JS
;(function ($, window, document, undefined) {
‘use strict’;
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>”);
// 总页数大于 6 必显示省略号
if (totalNum > 6) {
// 1、当前页码小于 5 且总页码大于 6 省略号显示后面 + 总页码
if (pageNum < 5) {
// 1 与 6 主要看要显示多少个按钮 目前都显示 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 {
// 2、当前页码接近后面 中间隔 3 个 省略号显示后面 + 总页面
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 {
// 3、页码至少在 5，最多在【totalNum – 3】的中间位置 第一页 + 省略号显示前面
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 {
// 总页数小于 6
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(”));
// DOM 重新生成后每次调用是否禁用 button
setTimeout(function () {
me.dis();
}, 20);
},
bindEvent: function () {
var me = this;
me.element.off(‘click’, ‘button’);
// 委托新生成的 dom 监听事件
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);
}
})(jQuery, window, document);
jQuery 插件友情链接
// 1、代码最前面的分号，可以防止多个文件压缩合并以为其他文件最后一行语句没加分号，而引起合并后的语法错误。// 2、匿名函数 (function(){})();：由于 Javascript 执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。避免函数体内和外部的变量冲突。// 3、$ 实参:$ 是 jquery 的简写，很多方法和类库也使用 $, 这里 $ 接受 jQuery 对象，也是为了避免 $ 变量冲突，保证插件可以正常运行。// 4、window, document 实参分别接受 window, document 对象，window, document 对象都是全局环境下的，而在函数体内的 window, document 其实是局部变量，不是全局的 window, document 对象。这样做有个好处就是可以提高性能，减少作用域链的查询时间，如果你在函数体内需要多次调用 window 或 document 对象，这样把 window 或 document 对象当作参数传进去，这样做是非常有必要的。当然如果你的插件用不到这两个对象，那么就不用传递这两个参数了。// 5、undefined 形参了，看起来是有点多余。undefined 在老一辈的浏览器是不被支持的，直接使用会报错，js 框架要考虑到兼容性，因此增加一个形参 undefined