基于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 相关文章推荐
js中判断文本框是否为空的两种方法
Jul 31 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
javascript操作ul中li的方法
May 14 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
深入浅析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/10/21 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
PHP 8新特性简介
2020/08/18 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python实现员工管理系统
2018/01/11 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
中学生获奖感言
2014/02/04 职场文书
临床专业自荐信
2014/06/22 职场文书
公司员工离职感言
2015/08/03 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript