基于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定义类的几种方式总结
Jan 06 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JavaScript简单编程实例学习
Feb 14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
Openlayers实现地图全屏显示
Sep 28 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 水平的题目
2007/05/30 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
PyQt5每天必学之布局管理
2018/04/19 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python Gitlab Api 使用方法
2019/08/28 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
行政经理的岗位职责
2013/11/23 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
法人任命书范本
2014/06/04 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python