分页插件(基于jq和bootstrap)
来源:互联网 发布:easy recover还原软件 编辑:程序博客网 时间:2024/05/16 18:42
感兴趣的可以Clone
下来自己看看:https://github.com/jx915/jqPaginator
一:引入js以及bootstrap.css文件
<link href="res/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="res/jquery-1.7.2.min.js" type="text/javascript"></script><script src="res/jqPaginator.min.js" type="text/javascript"></script>
二:html
<form id="form1" runat="server"> <div> </div> <div> <ul class="pagination" id="pagination"> </ul> <input type="hidden" id="PageSize" runat="server" value="" /> <input type="hidden" id="countindex" runat="server" value=""/> <!--设置最多显示的页码数 可以手动设置 默认为7--> <input type="hidden" id="visiblePages" runat="server" value="7" /> </div></form>
三:js
1.初始化
$(function () { loadpage(30,6);});
2.可以作为公共函数用来初始化
function loadpage(myPageCount,myPageSize) { var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize); $("#countindex").val(countindex); $.jqPaginator('#pagination', { totalPages: parseInt($("#countindex").val()), visiblePages: parseInt($("#visiblePages").val()), currentPage: 1, first: '<li class="first"><a href="javascript:;">首页</a></li>', prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>', next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>', last: '<li class="last"><a href="javascript:;">末页</a></li>', page: '<li class="page"><a href="javascript:;">{{page}}</a></li>', onPageChange: function (num, type) { if (type == "change") { exeData(num,type,myPageCount,myPageSize); } } });}
3.分页点击函数
function exeData(num, type,myPageCount,myPageSize) { loadpage(myPageCount,myPageSize); //后续肯定还有数据展示的js 这里只是简单的演示}
划重点
一般我们分页肯定是数据展示的时候用于分页的,这里给大家看一下用ajax
接收数据的时候如何初始化。
$.ajax({ type: "GET", async: true, url: url1, beforeSend: function(request) { request.setRequestHeader("Content-Type", "application/json"); request.setRequestHeader("Authorization", token1); }, success:function(dat){ //在这里大家最好做一个判断,因为有时候后台没有数据传过来的总条数为0的话会报错,我们就可以在总条数为0的时候给他一个总条数为1,反正也没有数据 if(dat.total=0){ loadpage(1, rows); }else{ loadpage(dat.total, rows); } //这里的dat.total是后台返回的条数,rows是自己可以定义的一页显示多少条,到这里的时候大家就可以知道是不是上面那个初始化一样传了两个参数,一个总条数,一个每页显示数呢 }})
在初始化之后我们就会出现上面那种图的样子,但是我们点击分页的时候还得重新获取一遍数据
function exeData(num, type, total, row) { loadpage(total, row, state,name); //这里传进来的num为页码 也就是第几页 $.ajax({ type: "GET", async: true, url: url1, success:function(dat){ //数据填充 }});
阅读全文
1 0
- 分页插件(基于jq和bootstrap)
- 基于bootstrap的分页插件bootstrap-paginator
- 分享几款基于bootstrap和jquery的分页插件
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- kkpager.js(jq分页插件)
- 基于Metronic的Bootstrap开发框架经验总结 --列表分页处理和插件JSTree的使用
- Bootstrap分页插件--Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- bootstrap分页插件Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- (5)bootstrap分页查询+pageHelper插件
- Bootstrap分页插件
- 自制bootstrap分页插件
- Bootstrap分页插件
- bootstrap分页插件
- bootstrap 分页表格插件
- Bootstrap Paginator 分页插件
- bootstrap-paginator分页插件
- centos搭建git
- 学习Android的一些好的开发文档
- LNMP一键安装包下载与安装
- Vue.js 组件编码规范
- H5 牛牛源码 微信牛牛 带后台控制 最新班带管理功能 大番薯
- 分页插件(基于jq和bootstrap)
- python Windows install face_recognition 人脸识别库
- mysql使用(2)
- 极光远程推送
- 无脑博士的试管们(计蒜客)
- centos搭建svn
- 先告一段落。。。
- Git使用:Linux(Ubuntu 14.04 x64)下安装Git并配置连接GitHub
- Semantic Segmentation