Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果


Posted in Javascript onMay 27, 2016

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请求的发送!最后实现无刷新分页。

Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

以上所述是小编给大家介绍的Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
JS继承 笔记
Jul 13 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
javascript常用的设计模式
Feb 09 Javascript
angular directive的简单使用总结
May 24 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 #Javascript
Dojo获取下拉框的文本和值实例代码
May 27 #Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 #Javascript
js基于cookie方式记住返回页面用法示例
May 27 #Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 #Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 #Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php三元运算符知识汇总
2015/07/02 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
深入解析Python中的线程同步方法
2016/06/14 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
简单谈谈Python中的闭包
2016/11/30 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python可视化实现代码
2019/01/15 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
高中美术教学反思
2014/01/19 职场文书
小学毕业寄语大全
2014/04/03 职场文书
个人授权委托书范文
2014/09/21 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
小学运动会报道稿
2015/07/22 职场文书
分享几种python 变量合并方法
2022/03/20 Python