Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
来源:互联网 发布:明礼仪知荣辱演讲稿 编辑:程序博客网 时间:2024/04/25 11:27
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它。
Bootstrap Paginator分页插件下载地址:
DownloadVisit Project in GitHub
1.这是需要分页的页面放的 js函数:
<span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:"json", success: function(msg){ ....//省略(查询出来数据) } }); $.ajax({ type: "GET", url:"${ctx}/api/v1/user/count/1", dataType:"json", success:function(msg){ var pages = Math.ceil(msg.data/5);//这里data里面有数据总量 var element = $('#pageUl');//对应下面ul的ID var options = { bootstrapMajorVersion:3, currentPage: page,//当前页面 numberOfPages: 5,//一页显示几个按钮(在ul里面生成5个li) totalPages:pages //总页数 } element.bootstrapPaginator(options); } }); }</span>页面:
<span style="font-size:14px;"><ul class="pagination" id="pageUl"></ul></span>
*li里面自动生成的
2.最重要也是最核心的是要自己改下bootstrap-paginator.js源文件,如下:
<span style="font-size:14px;">onPageClicked: function (event, originalEvent, type, page) { //show the corresponding page and retrieve the newly built item related to the page clicked before for the event return var currentTarget = $(event.currentTarget); switch (type) { case "first": currentTarget.bootstrapPaginator("showFirst"); paging(page); break; //上一页 case "prev": currentTarget.bootstrapPaginator("showPrevious"); paging(page); break; case "next": currentTarget.bootstrapPaginator("showNext"); paging(page); break; case "last": currentTarget.bootstrapPaginator("showLast"); paging(page); break; case "page": currentTarget.bootstrapPaginator("show", page); paging(page); break; } },</span>
*在你点击的页面样式出来后调用paging(page)方法,这里的page源文件里的参数已经有了,直接传!
效果:当样式改变后,直接拿控件的page值进行ajax请求的发送!最后实现无刷新分页。
2 1
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- bootstrap-paginator分页插件无格式
- Bootstrap Paginator 分页插件
- bootstrap-paginator分页插件
- Bootstrap分页插件--Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- bootstrap分页插件Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- Bootstrap Paginator 分页插件使用
- 使用Bootstrap Paginator分页插件进行分页
- 基于bootstrap的分页插件bootstrap-paginator
- Asp.Net分页方法:JQuery插件实现Ajax无刷新分页、AspNetPager分页控件实现分页
- ajax实现分页无刷新
- AJAX实现无刷新分页
- Ajax 实现无刷新分页
- ajax实现无刷新分页
- KMP算法(Python实现)
- python数组查找算法---bisect二分查找插入
- Java之美[从菜鸟到高手演变]之设计模式
- Sysbench参数中文解释
- JavaScript 中小数和大整数的精度丢失
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- ELMAH--Using HTTP Modules and Handlers to Create Pluggable ASP.NET Components 77 out of 90 rated th
- 阿里巴巴集团全资收购UC优视
- twitter storm源码走读之8 -- TridentTopology创建过程详解 - 徽沪一郎
- Ubuntu 下的sqlmap,nmap,metasploit安装
- 判断system()执行shell脚本是否正常执行结束
- android 主题和样式-style和Theme的区别和使用
- VC++ ado连接数据库(可以在VC6.0使用,以access数据库为实例)(1)
- 读书笔记 --- 接近传感器