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

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

创新互联成立十年来，这条路我们正越走越好，积累了技术与客户资源，形成了良好的口碑。为客户提供网站设计、网站制作、网站策划、网页设计、空间域名、网络营销、VI设计、网站改版、漏洞修补等服务。网站是否美观、功能强大、用户体验好、性价比高、打开快等等，这些对于网站建设都非常重要，创新互联通过对建站技术性的掌握、对创意设计的研究为客户提供一站式互联网解决方案，携手广大客户，共同发展进步。

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分页插件使用心得(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

网页题目：基于twbsPagination.js分页插件使用心得(分享)
文章URL：https://www.cdcxhl.com/article30/ghidpo.html

成都网站建设公司_创新互联，为您提供静态网站、网站维护、网站导航、企业网站制作、响应式网站、域名注册

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容