Bootstrap分页(带有省略号)
来源:互联网 发布:jquery 同步加载js 编辑:程序博客网 时间:2024/06/04 04:07
Bootstrap 分页
使用Bootstrap实现分页,并且当页码过多时使用省略号
源码下载
代码片段一(HTML主要部分)
<html style="padding-bottom: 54px;"> <title>jquery</title> <script type="text/javascript"> $(function(){ $(".pagination").createPage({ totalPage:30, currPage:14, backFn:function(p){ console.log("回调函数:"+p); } }); })</script></head><body> <div class="pagec" id="pagearea"> <ul class="pagination"> </ul> </div></body></html>
代码片段二(JavaScript)
(function($){ var ms = { init:function(totalsubpageTmep,args){ return (function(){ ms.fillHtml(totalsubpageTmep,args); ms.bindEvent(totalsubpageTmep,args); })(); }, //填充html fillHtml:function(totalsubpageTmep,args){ return (function(){ totalsubpageTmep=""; // 页码大于等于4的时候,添加第一个页码元素 if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) { totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+1+"</a></li>"; } /* 当前页码>4, 并且<=总页码,总页码>5,添加“···”*/ if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) { totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>"; } /* 当前页码的前两页 */ var start = args.currPage-2; /* 当前页码的后两页 */ var end = args.currPage+2; if((start>1 && args.currPage<4) || args.currPage==1) { end++; } if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) { start--; } for(; start<=end; start++) { if(start<=args.totalPage && start>=1) { totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+start+"</a></li>"; } } if(args.currPage+2<args.totalPage-1 && args.currPage>=1 && args.totalPage>5) { totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>"; } if(args.currPage!=args.totalPage && args.currPage<args.totalPage-2 && args.totalPage!=4) { totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+args.totalPage+"</a></li>"; } $(".pagination").html(totalsubpageTmep); })(); }, //绑定事件 bindEvent:function(totalsubpageTmep,args){ return (function(){ totalsubpageTmep.on("click","a.geraltTb_pager",function(event){ var current = parseInt($(this).text()); ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); })(); } } $.fn.createPage = function(options){ ms.init(this,options); }})(jQuery);
1 0
- Bootstrap分页(带有省略号)
- 带有省略号的分页组件
- Bootstrap前端分页的实现(带省略号)
- 基于bootstrap的前端分页。带省略号和上下页。
- java 模拟省略号分页
- bootstrap分页
- bootstrap分页
- Bootstrap 分页
- bootstrap分页
- Bootstrap 分页
- bootstrap-分页
- bootstrap 分页
- bootstrap分页
- BootStrap 分页
- bootstrap分页
- Bootstrap分页
- bootstrap 分页
- Latex带有省略号矩阵的实现
- 杭电1215 七夕节
- 数据结构,栈,括号配对
- 关于模板函数声明与定义的问题
- Ext2文件系统分区数据结构
- 异步通知 fasync 用法积累
- Bootstrap分页(带有省略号)
- Linux登录用户查看及相应操作
- oracle中使用存储过程实现分页
- UI屏幕适配必备的知识点
- LED跑马灯_20160107
- tyvj 1018 阶乘统计 和 1037 阶乘统计2
- [面试]排列组合与概率计算(一)
- 图的基本操作及应用
- 初次尝试写技术blog