js 分页插件(jQuery)

参考：http://www.jb51.net/article/117191.htm 侵删

css 部分

@charset "utf=8";
*{box-sizing: border-box;padding: 0;margin: 0;
}
.page{font-size: 13px;text-align: center;margin-top: 20px;
}
.page .page_to{display: inline-block;max-width: 250px;
}
.page .page_to li{display: inline-block;width: auto;height: auto;border: 1px solid #ddd;padding:5px 10px;border-left-width: 0;color: #323232;cursor: pointer;
}
.page .page_to li.page_hide{display: none;
}
.page .page_to li:hover{color: #32C2CD;background-color: #f4f4f4;border-color: #DDDDDD;
}
.page .page_to li:first-child{border-left-width: 1px;
}
.page .page_jump{display: inline-block;width: 180px;
}
.page .page_jump input.page_jump_input{width: 52px;height: 28px;text-align: center;text-decoration: none;background-color: #fff;border: 1px solid #ddd;margin:0 4px;
}
.page .page_jump input.page_jump_btn{display: inline-block;padding: 2px 10px;margin-left: 5px;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;/*vertical-align: middle;*/-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 1px solid transparent;border-radius: 4px;background-color: #32c5d2;color: #FFFFFF;font-weight: bold;
}

js 部分

(function($, window, undefined) {var curPage = '',//跳转是否有值jumpVal = '',//从DOM中重新获取数据总数/总页数lists = '',totals = '',//是否返回值isTrue = false;var Page = function(opts) {this.settings = $.extend({}, Page.defaults, opts);curPage = this.settings.initPage;totals = this.settings.totalPages;jumpVal = this.settings.inputVal;this.init();};//默认配置Page.defaults = {container: '.page',setPos: 'body',totalPages: null,totalLists: null,initPage: 1,inputVal: 1,callBack: null};Page.prototype = {init: function() {this.create();},create: function() {var _template = '<div class="page">'  '<span class="page_details">'  '共<span class="page_num">'   this.settings.totalLists   '</span>条记录，'  '第<span class="page_current">'   curPage   '</span>/'  '<span class="page_size">'   this.settings.totalPages   '</span>页'  '</span>'  '<div class="page_to">'  '<ul class="flex_parent">'  '<li class="page_first flex_child">首页</li>'  '<li class="page_pre page_hide flex_child">« 上一页</li>'  '<li class="page_next flex_child">下一页 »</li>'  '<li class="page_last flex_child">末页</li>'  '</ul>'  '</div>'  '<div class="page_jump">'  '<span>第：<input type="number" class="page_jump_input" value="'   this.settings.inputVal   '">页</span>'  '<input type="button" class="page_jump_btn" value="Go">'  '</div>'  '</div>';$(this.settings.setPos).append(_template);this.refreshDom();this.bindEvent();},bindEvent: function() {var _this = this;//跳转首页$(this.settings.container).on("click", ".page_first", function() {lists = $(_this.settings.container).find(".page_num").text();totals = $(_this.settings.container).find(".page_size").text();if ($.isFunction(_this.settings.callBack)) {curPage = 1;isTrue = _this.settings.callBack(1);if (isTrue) {_this.refreshDom();$(_this.settings.container).find(".page_current").text(1);$(_this.settings.container).find(".page_jump_input").val(curPage);}}});//跳转上一页$(this.settings.container).on("click", ".page_pre", function() {lists = $(_this.settings.container).find(".page_num").text();totals = $(_this.settings.container).find(".page_size").text();if ($.isFunction(_this.settings.callBack)) {if (curPage > 1) {curPage = curPage - 1;isTrue = _this.settings.callBack(curPage);if (isTrue) {_this.refreshDom();$(_this.settings.container).find(".page_current").text(curPage);$(_this.settings.container).find(".page_jump_input").val(curPage);}}}});//跳转下一页$(this.settings.container).on("click", ".page_next", function() {lists = $(_this.settings.container).find(".page_num").text();totals = $(_this.settings.container).find(".page_size").text();if ($.isFunction(_this.settings.callBack)) {if (curPage < totals) {curPage = curPage   1;isTrue = _this.settings.callBack(curPage);if (isTrue) {_this.refreshDom();$(_this.settings.container).find(".page_current").text(curPage);$(_this.settings.container).find(".page_jump_input").val(curPage);}}}});//跳转末页$(this.settings.container).on("click", ".page_last", function() {lists = $(_this.settings.container).find(".page_num").text();totals = $(_this.settings.container).find(".page_size").text();if ($.isFunction(_this.settings.callBack)) {curPage = totals;isTrue = _this.settings.callBack(curPage);if (isTrue) {_this.refreshDom();$(_this.settings.container).find(".page_current").text(totals);$(_this.settings.container).find(".page_jump_input").val(curPage);}}});//Go跳转$(this.settings.container).on("click", ".page_jump_btn", function() {lists = $(_this.settings.container).find(".page_num").text();totals = $(_this.settings.container).find(".page_size").text();if ($.isFunction(_this.settings.callBack)) {jumpVal = Number($(_this.settings.container).find("input.page_jump_input").val());// console.log('跳转的页数：'   jumpVal   ';跳转之前的页数：'   curPage);isTrue = _this.settings.callBack(jumpVal);if (jumpVal >= 1 && jumpVal <= totals) {curPage = jumpVal;// isTrue = _this.settings.callBack(curPage);if (isTrue) {_this.refreshDom();$(_this.settings.container).find(".page_current").text(curPage);$(_this.settings.container).find(".page_jump_input").val(curPage);}} else {jumpVal = curPage;}}});},refreshDom: function() {$(this.settings.container).find("li.flex_child").removeClass("page_hide");if (Number(totals) == 1) {$(this.settings.container).find(".page_pre").addClass("page_hide");$(this.settings.container).find(".page_next").addClass("page_hide");} else if (Number(totals) == 2) {if (Number(curPage) == 1) {$(this.settings.container).find(".page_pre").addClass("page_hide");} else {$(this.settings.container).find(".page_next").addClass("page_hide");}} else if (Number(curPage) == 1 && Number(totals) > 2) {$(this.settings.container).find(".page_pre").addClass("page_hide");} else if (Number(curPage) == Number(totals) && Number(totals) > 2) {$(this.settings.container).find(".page_next").addClass("page_hide");}}};var pageInit = function(opts) {return new Page(opts);};window.pageInit = $.pageInit = pageInit;})(jQuery, window, undefined);

调用

function page(){$.pageInit({container: '.page', //容器：默认pagesetPos: '.pageBox', //放置位置：默认bodytotalPages: totalPages, //总页数：必填（后台返回的，加载列表可以取到）totalLists: totalCount, //数据总数：必填（后台返回的，加载列表可以取到）initPage: pageNo, //初始页码：默认1（后台会返回，自己也可以定义）inputVal: 1, //设置跳转的input值：默认1//要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行callBack: function(n) {var flag = true;
　　　　　　　console.log(n);getCustomerList(n); //getCustomerList 是加载列表的方法；n 为返回的页码数，return flag;}});
};