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 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
Vue基础配置讲解
Nov 29 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
url decode problem 解决方法
2011/12/26 PHP
PHP连接access数据库
2015/03/27 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
js回调函数仿360开机
2019/12/26 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
详解Python中的文本处理
2015/04/11 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python实现桌面气泡提示功能
2019/07/29 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
英语教学随笔感言
2014/02/20 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
分公司任命书
2014/06/06 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
mysql insert 存在即不插入语法说明
2022/03/25 MySQL