目标
制作js分页导航jq插件,用于无刷新分页或者刷新分页
实现目标参考京东和天猫的分页条.
有四个固定按钮,前页码,后页码,首页,末页.
程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照点,根据需要显示的页码按钮个数,计算参照点前后的页码数量.
当起止点小于1或者大于最大页码时,需要调整起点为1,或止点为最大页码.
效果图
html结构
容器nav,里面分为页码区(pagenum-btns)和跳转区(pagenum-skip)两部分.
js生成nav里面的内容.
<nav class="pagenum" id="pagenum1"><span class="pagenum-btns"><a class="pagenum-prev"><</a><a class="pagenum-num">1</a><span class="pagenum-break">...</span><a class="pagenum-num">7</a><a class="pagenum-num">8</a><a class="pagenum-active">9</a><a class="pagenum-num">10</a><a class="pagenum-num">11</a><span class="pagenum-break">...</span><a class="pagenum-num">98</a><a class="pagenum-next">></a></span><span class="pagenum-skip">共<b class="pagenum-total">98</b>页 到第<input class="pagenum-input" value="1" type="text" />页<a class="pagenum-ok">确定</a></span> </nav>
调用
// dom结构 需要一个容器
// 将相应样式添加到容器可调整外观.大小: sm lg xl 颜色: gray red green yellow 位置:center right
<nav class="pagenum" id="pagenumId"></nav>// 调用方法 let cfg={// 点击页码方法(必须)pageClickE:function(){},// 总数(必须) >0totalData:100,// 当前页码(必须) >0pageIndex:'当前页码',// 每页数量 [5-50]pageSize:10,// 显示几个按钮[5-10]totalBtn:5 } $('#pagenumId').pagenum(cfg);
web前端一般是无刷新分页,pageClickE方法会包含一个ajax请求,这个请求的回调方法里,再执行生成新的分页条,并且配置参数中的pageClickE,再次指向ajax方法自己
// ajax请求示例方法 function getdata() {var para = {};$.post('/api/PageNumber', { para:JSON.stringify(para) }, function (data){if (data.length == 0){// 如果没有数据返回,可以不用生成分页条.return;}// 再生成新分页条let cfg={// 这里绑定getdata方法自己pageClickE:function(){ getdata() },// 总数(必须) >0 由后端返回新的总数 totalData:data.总数,// 当前页码(必须) >0 由后端返回当前页码,或者页面记住当前请求页面 pageIndex:data.当前页码,// 每页数量 [5-50]pageSize:10,// 显示几个按钮[5-10]totalBtn:5}$('#pagenumId').pagenum(cfg); }
.pagenum {height: 2.7em;line-height: 2.7em;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }.pagenum-btns {font-size: 0; }.pagenum-prev, .pagenum-num, .pagenum-active, .pagenum-next, .pagenum-break {display: inline-block;width: 2.7em;text-align: center;font-size: 14px;color: #007bff;border: 1px solid #ced4da;border-left: none; }.pagenum-prev:hover, .pagenum-num:hover, .pagenum-active:hover, .pagenum-next:hover {text-decoration: none;cursor: pointer;color: #007bff;background-color: #e9ecef;}.pagenum-prev {border-left: 1px solid #ced4da; }.pagenum-active, .pagenum-active:hover {color: #fff;background-color: #007bff; }.pagenum-break {color: #ced4da; }.pagenum-skip {margin-left: 5px; }.pagenum-input {width: 2.7em;text-align: center;border: 1px solid #ced4da;padding: 0;margin: 0 3px; }.pagenum-input:focus {outline: 2px solid #007bff;}.pagenum-ok {display: inline-block;width: 3em;text-align: center;margin-left: 5px;color: #007bff;border: 1px solid #ced4da; }.pagenum-ok:hover {text-decoration: none;color: #007bff;cursor: pointer;}.pagenum.sm {font-size: 12px; }.pagenum.sm .pagenum-prev, .pagenum.sm .pagenum-num, .pagenum.sm .pagenum-active, .pagenum.sm .pagenum-next, .pagenum.sm .pagenum-break {font-size: 12px;}.pagenum.lg {font-size: 16px; }.pagenum.lg .pagenum-prev, .pagenum.lg .pagenum-num, .pagenum.lg .pagenum-active, .pagenum.lg .pagenum-next, .pagenum.lg .pagenum-break {font-size: 16px;}.pagenum.xl {font-size: 20px; }.pagenum.xl .pagenum-prev, .pagenum.xl .pagenum-num, .pagenum.xl .pagenum-active, .pagenum.xl .pagenum-next, .pagenum.xl .pagenum-break {font-size: 20px;}.pagenum.gray .pagenum-prev, .pagenum.gray .pagenum-num, .pagenum.gray .pagenum-active, .pagenum.gray .pagenum-next, .pagenum.gray .pagenum-break, .pagenum.gray .pagenum-prev:hover, .pagenum.gray .pagenum-num:hover, .pagenum.gray .pagenum-active:hover, .pagenum.gray .pagenum-next:hover, .pagenum.gray .pagenum-ok, .pagenum.gray .pagenum-ok:hover {color: #6c757d; }.pagenum.gray .pagenum-active, .pagenum.gray .pagenum-active:hover {color: #fff;background-color: #6c757d;}.pagenum.green .pagenum-prev, .pagenum.green .pagenum-num, .pagenum.green .pagenum-active, .pagenum.green .pagenum-next, .pagenum.green .pagenum-break, .pagenum.green .pagenum-prev:hover, .pagenum.green .pagenum-num:hover, .pagenum.green .pagenum-active:hover, .pagenum.green .pagenum-next:hover, .pagenum.green .pagenum-ok, .pagenum.green .pagenum-ok:hover {color: #28a745; }.pagenum.green .pagenum-active, .pagenum.green .pagenum-active:hover {color: #fff;background-color: #28a745;}.pagenum.red .pagenum-prev, .pagenum.red .pagenum-num, .pagenum.red .pagenum-active, .pagenum.red .pagenum-next, .pagenum.red .pagenum-break, .pagenum.red .pagenum-prev:hover, .pagenum.red .pagenum-num:hover, .pagenum.red .pagenum-active:hover, .pagenum.red .pagenum-next:hover, .pagenum.red .pagenum-ok, .pagenum.red .pagenum-ok:hover {color: #dc3545; }.pagenum.red .pagenum-active, .pagenum.red .pagenum-active:hover {color: #fff;background-color: #dc3545;}.pagenum.yellow .pagenum-prev, .pagenum.yellow .pagenum-num, .pagenum.yellow .pagenum-active, .pagenum.yellow .pagenum-next, .pagenum.yellow .pagenum-break, .pagenum.yellow .pagenum-prev:hover, .pagenum.yellow .pagenum-num:hover, .pagenum.yellow .pagenum-active:hover, .pagenum.yellow .pagenum-next:hover, .pagenum.yellow .pagenum-ok, .pagenum.yellow .pagenum-ok:hover {color: #ffc107; }.pagenum.yellow .pagenum-active, .pagenum.yellow .pagenum-active:hover {color: #fff;background-color: #ffc107;}.pagenum.center {text-align: center; }.pagenum.right {text-align: right; }
$.fn.extend({/*=============================================================================** 调用 $('#pagenum1').pagenum(cfg), 每次调用都会更新分页条状态.* 必须参数:{totalData:'总数',pageIndex:'当前页码',pageSize:'每页数量'}* 当总数大于0时,才需要调用分页条*=============================================================================*/pagenum: function (config){// 外层框JQ对象let pnJQ = $(this);let cfg = {};/*====================** 方法 public*====================*//*====================** 方法 private*====================*/// 初始化配置 {totalData:'总数',pageIndex:'当前页码',pageSize:'每页数量',pageClickE:'点击页码方法'}let initCfg = function (config){// 当前页码cfg.PageIndex = config.pageIndex || 1;// 每页数量[5-50]cfg.PageSize = (config.pageSize > 4 && config.pageSize < 51) ? config.PageSize : 10;// 数据总数cfg.TotalData = config.totalData || 0;// 总页数cfg.TotalPage = getTotalPage();// 分页按钮个数[5-10].cfg.TotalBtn = (config.totalBtn > 4 && config.pageSize < 11) ? config.totalBtn : 5;// 页码点击事件方法cfg.pageClickE = config.pageClickE;}// 主要方法:更新分页条数据,绑定相关事件let newPageNum = function (){// 清空DOM,重新生成分页组件DOM,绑定事件 pnJQ.empty();// 1.页码按钮区域pnJQ.append('<span class="pagenum-btns"></span>');// 2.跳转按钮区域pnJQ.append(String.Format('<span class="pagenum-skip">共<b class="pagenum-total">{0}</b>页 到第<input class="pagenum-input" />页<a class="pagenum-ok">确定</a></span>', cfg.TotalPage));// 计算页码起止 pagenumRange();//console.log(cfg);/*-------------------------------------------------------** 添加按钮DOM* 页码区固定按钮4个:前一页,第1页和第末页,后一页.*-------------------------------------------------------*/let btndom = '';// 向前按钮btndom += String.Format('<a class="pagenum-prev" pagenum="{0}"><</a>', cfg.PageIndex - 1);// 第1页按钮,当起始页码大于1时添加if (cfg.StartIndex > 1)btndom += String.Format('<a class="pagenum-{0}" pagenum="1">1</a>',cfg.PageIndex == 1 ? 'active' : 'num');// 前省略号,当起始页码大于2时添加if (cfg.StartIndex> 2){btndom+='<span class="pagenum-break">...</span>';}// 页码按钮for (let i = cfg.StartIndex; i <= cfg.EndIndex; i++){let pagenum = i;btndom += String.Format('<a class="pagenum-{0}" pagenum="{1}">{1}</a>', pagenum == cfg.PageIndex ? 'active' : 'num', pagenum);}// 后省略号,当结束页小于最大页码-1时if (cfg.EndIndex < (cfg.TotalPage - 1)){btndom+='<span class="pagenum-break">...</span>';}// 末页按钮,当结束页小于最大页码时添加if (cfg.EndIndex < cfg.TotalPage)btndom += String.Format('<a class="pagenum-{0}" pagenum="{1}">{1}</a>',cfg.PageIndex == cfg.TotalPage ? 'active' : 'num', cfg.TotalPage);// 向后按钮btndom += String.Format('<a class="pagenum-next" pagenum="{0}">></a>', cfg.PageIndex + 1);// 将btndom添加到页码按钮区域容器pnJQ.find('.pagenum-btns').append(btndom);// 绑定所有按钮事件 bindEventForAllBtn();}// 计算起始页码位置:以当前页码为中间位置,根据需要显示的页码按钮个数,计算当前页码之前和之后的页码数.// 当前页码在正中,如果显示按钮个数为偶数,则偏左.例如: "2 3 (4:当前页码在此) 5 6 7"let pagenumRange = function (){let startIndex = cfg.PageIndex - parseInt(cfg.TotalBtn / 2)+ (cfg.TotalBtn % 2 == 0 ? 1 : 0);let endIndex = cfg.PageIndex + parseInt(cfg.TotalBtn / 2);// 起始页小于1,说明当前页码位于正中时,前面页码数不够了.应将第1页为起始页码,而结束页码也应该重新计算if (startIndex < 1){startIndex = 1;// 根据要显示的页码数计算结束页码,如果算出页码数大于总页码,则以总页码数为结束页码endIndex = endIndex > cfg.TotalPage ? cfg.TotalPage : cfg.TotalBtn;}// 结束页码大于总页码,说明当前页码位于正中时,后面的页码数不够.应将总页码数为终止页码,起始页码应重新计算if (endIndex > cfg.TotalPage){endIndex = cfg.TotalPage;// 根据要显示的页码数计算起始页码,如果算出小于1,则以1为起始页码startIndex = endIndex - cfg.TotalBtn + 1;if (startIndex < 1)startIndex = 1;}cfg.StartIndex = startIndex;cfg.EndIndex = endIndex;}// 表示前一页码(应由当前页码计算得出)let getPrevPage = function (){return cfg.PageIndex == 1 ? 1 : cfg.PageIndex - 1;}// 表示后一页码let getNextPage = function (){return cfg.TotalPage == cfg.PageIndex ? cfg.PageIndex : cfg.PageIndex + 1;}// 总页数(由数量总数和分页大小算出)let getTotalPage = function (){if (cfg.TotalData >= 0 && cfg.PageSize >= 5&& cfg.PageIndex >= 1){let pagecount = parseInt(cfg.TotalData / cfg.PageSize);let pagecountM = cfg.TotalData % cfg.PageSize;return pagecountM > 0 ? pagecount + 1 : pagecount;}return 0;}/*====================** 事件绑定 *====================*/let bindEventForAllBtn = function (){// 页码按钮点击pnJQ.find('.pagenum-prev,.pagenum-next,.pagenum-first,.pagenum-last,.pagenum-num').on('click',function (){// 页码参数范围[1-总页码],范围外不动作let pnnum = parseInt($(this).attr('pagenum')) || 0;if (pnnum < 1 || pnnum > cfg.TotalPage) return;cfg.pageClickE(pnnum);});// 确定按钮点击pnJQ.find('.pagenum-ok').on('click',function (){let pnnum = parseInt(pnJQ.find('.pagenum-input').val()) || 0;if (pnnum < 1 || pnnum > cfg.TotalPage) return;cfg.pageClickE(pnnum);});}/*============================** 初始化配置,生成分页组件*============================*/initCfg(config);newPageNum();} })
