基于twbsPagination.js分页插件使用心得(分享)


Posted in Javascript onOctober 21, 2017

项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把。其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来:

1、分页插件引入html中需要:

bootstrap.css

分页插件js

自己写的分页的样式css【如果不用,也可以直接用bootstrap所带的分页css。】

使用jquery可以引入jquery.js

html中:

<script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>
<link rel="stylesheet" href="<c:url value=" rel="external nofollow" rel="external nofollow" /content/common/css/bootstrap.min.css"/>" />
<link rel="stylesheet" href="<c:url value=" rel="external nofollow" rel="external nofollow" /content/common/css/pagination.css"/>" />

2、分页插件使用时:

可以定义一个专门页面转换的方法,引入使用:

html中:

<ul id="pagination" class="pagination">
</ul>

js中:

managementPage:function (pagesize) {
 var obj = $('#managePagination').twbsPagination({
  totalPages: pagesize,//总页数
  startPage: 1,//起始页
  visiblePages: pagesize>5?5:pagesize,//展示页数,超出5页展示5页,未超出时展示总页数
  initiateStartPageClick: true,
  hideOnlyOnePage: true,//只有一页时不展示分页
  onPageClick:function (event,page) {//点击页面事件,回调函数,只能使用ajax异步加载,暂时未发现能够直接在前端操作data的方法。
   $(this).addClass("active").siblings().removeClass("active");

   var start = (page - 1)*5+1;
   var end = page*5+1;
   var param = {
    'start':start,
    'end':end
   };
   ds.manageSystem(manageSystemUrl,param);//异步加载的方法,主要需要将起始页与结束页带回后台
  }
 });
 obj.data();//加载分页样式
},

3、注意:分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现,则需要引用以下代码:

//页面重载时置空分页数据(属于分页插件)
 $('#managePagination').empty();
 $('#managePagination').removeData("twbs-pagination");
 $('#managePagination').unbind('page');

这段代码放入的地方也有讲究,需要放在即将异步加载的数据之前,先异步加载的数据一步清空分页插件,此时再次加载的分页数据才是新的数据内容。

4、分页插件基本使用以上代码便可全部满足。

以上这篇基于twbsPagination.js分页插件使用心得(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的new使用
Mar 20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 #Javascript
vue做网页开场视频的实例代码
Oct 20 #Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 #Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 #Javascript
2种简单的js倒计时方式
Oct 20 #Javascript
pm2 部署 node的三种方法示例
Oct 20 #Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 #Javascript
You might like
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JS 统计时间
2021/03/09 Javascript
接收键盘指令的脚本
2006/06/26 Javascript
取选中的radio的值
2010/01/11 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python读取中文txt文本的方法
2018/04/12 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Django实现文件上传下载
2019/10/06 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
团组织关系介绍信
2014/01/12 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书