js 分页插件(jQuery)
程序员文章站
2022-04-15 19:52:10
参考:http://www.jb51.net/article/117191.htm 侵删 css 部分 js 部分 调用 ......
参考: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', //容器:默认page setPos: '.pageBox', //放置位置:默认body totalPages: 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; } }); };