Bootstrap jquery.twbsPagination.js动态页码分页实例代码

前端之家收集整理的这篇文章主要介绍了Bootstrap jquery.twbsPagination.js动态页码分页实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap风格的分页控件自适应的:

参考网址:nofollow" target="_blank" href="http://esimakin.github.io/twbs-pagination/">分页参考文档

1.风格样式:

2.首先引入js文件jQuery.twbsPagination.js

3.html页面

4.初始化

分页组件否则保留上次查询的,一般来说很多问题出现与这三行代码有关如:虽然数据正确但是页码不对仍然为上一次查询出的一致 $('#pagination-log').empty(); $('#pagination-log').removeData("twbs-pagination"); $('#pagination-log').unbind("page"); //将页面的数据容器制空 $("#messagebody").empty(); //设置默认当前页 var pagenow = 1; //设置默认总页数 var totalPage = 1; //设置默认可见页数 var visiblecount = 5; //加载后台数据页面 function loaddata() { $.ajax({ url : "/tqyh/showUserloginfo",type : "post",data : { "currentpage" : pagenow },dataType : "json",success : function(data) { var htmlobj = ""; totalPage = data.page.totalPage;//将后台数据复制给总页数 totalcount = data.page.totalCount; $("#userlogbody").empty(); $.each(data.userlog,function(index,userlog) { htmlobj = htmlobj + "" + " LOCATION后台总页数与可见页数比较如果小于可见页数则可见页数设置为总页数, if (totalPage < visiblecount) { visiblecount = totalPage; } $('#pagination-log').twbsPagination({ totalPages : totalPage,visiblePages : visiblecount,version : '1.1',//页面点击时触发事件 onPageClick : function(event,page) { // 将当前页数重置为page pagenow = page //调用后台获取数据函数加载点击的页码数据 loaddata(); } }); },error : function(e) { alert("s数据访问失败") } }); } //函数初始化是调用内部函数 loaddata(); };

6.后台的json数据返回就行

7.结果截图:

以上所述是小编给大家介绍的Bootstrap jquery.twbsPagination.js动态页码分页实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章