基于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 instanceof,typeof的区别
Mar 24 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
jQuery选择器基础入门教程
May 10 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python实现登录与注册系统
2020/11/30 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
两只小狮子教学反思
2014/02/05 职场文书
小摄影师教学反思
2014/04/27 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
公司股东出资证明书
2014/11/01 职场文书