常州企业网站建设价格,wordpress主体功能开关,wordpress门户型多栏设计,下载微信公众号目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照点,根据需要显示的页码按钮个数,计算参照点前后的页码数量. 当起止点小于1或者…目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照点,根据需要显示的页码按钮个数,计算参照点前后的页码数量. 当起止点小于1或者大于最大页码时,需要调整起点为1,或止点为最大页码. 效果图 html结构 容器nav,里面分为页码区(pagenum-btns)和跳转区(pagenum-skip)两部分. js生成nav里面的内容. nav classpagenum idpagenum1span classpagenum-btnsa classpagenum-prev/aa classpagenum-num1/aspan classpagenum-break.../spana classpagenum-num7/aa classpagenum-num8/aa classpagenum-active9/aa classpagenum-num10/aa classpagenum-num11/aspan classpagenum-break.../spana classpagenum-num98/aa classpagenum-next/a/spanspan classpagenum-skip共b classpagenum-total98/b页nbsp;nbsp;到第input classpagenum-input value1 typetext /页a classpagenum-ok确定/a/span
/nav 调用 // dom结构 需要一个容器// 将相应样式添加到容器可调整外观.大小: sm lg xl 颜色: gray red green yellow 位置:center rightnav classpagenum idpagenumId/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;
} css $.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 classpagenum-btns/span);// 2.跳转按钮区域pnJQ.append(String.Format(span classpagenum-skip共b classpagenum-total{0}/b页nbsp;nbsp;到第input classpagenum-input /页a classpagenum-ok确定/a/span, cfg.TotalPage));// 计算页码起止pagenumRange();//console.log(cfg);/*-------------------------------------------------------** 添加按钮DOM* 页码区固定按钮4个:前一页,第1页和第末页,后一页.*-------------------------------------------------------*/let btndom ;// 向前按钮btndom String.Format(a classpagenum-prev pagenum{0}/a, cfg.PageIndex - 1);// 第1页按钮,当起始页码大于1时添加if (cfg.StartIndex 1)btndom String.Format(a classpagenum-{0} pagenum11/a,cfg.PageIndex 1 ? active : num);// 前省略号,当起始页码大于2时添加if (cfg.StartIndex 2){btndomspan classpagenum-break.../span;}// 页码按钮for (let i cfg.StartIndex; i cfg.EndIndex; i){let pagenum i;btndom String.Format(a classpagenum-{0} pagenum{1}{1}/a, pagenum cfg.PageIndex ? active : num, pagenum);}// 后省略号,当结束页小于最大页码-1时if (cfg.EndIndex (cfg.TotalPage - 1)){btndomspan classpagenum-break.../span;}// 末页按钮,当结束页小于最大页码时添加if (cfg.EndIndex cfg.TotalPage)btndom String.Format(a classpagenum-{0} pagenum{1}{1}/a,cfg.PageIndex cfg.TotalPage ? active : num, cfg.TotalPage);// 向后按钮btndom String.Format(a classpagenum-next pagenum{0}/a, cfg.PageIndex 1);// 将btndom添加到页码按钮区域容器pnJQ.find(.pagenum-btns).append(btndom);// 绑定所有按钮事件bindEventForAllBtn();}// 计算起始页码位置:以当前页码为中间位置,根据需要显示的页码按钮个数,计算当前页码之前和之后的页码数.// 当前页码在正中,如果显示按钮个数为偶数,则偏左.例如: 2 3 (4:当前页码在此) 5 6 7let 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();}
}) pagenum.js转载于:https://www.cnblogs.com/mirrortom/p/8025410.html
