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


Posted in Javascript onFebruary 20, 2017

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

参考网址:分页参考文档

1.风格样式:

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

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

<span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span>

3.html页面

<span style="font-size:14px;"><div class="text-center"> 
 <ul id="pagination-log" class="pagination-sm"></ul> 
</div></span>

4.初始化

<span style="font-size:14px;">// 初始化加载信息数据 
function initUserlogData() { 
 //重置分页组件否则保留上次查询的,一般来说很多问题出现与这三行代码有关如:虽然数据正确但是页码不对仍然为上一次查询出的一致 
 $('#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 + "<tr>" 
       + "<td><input type='checkbox'/></td>" + "<td>" 
       + userlog.toUserName + "</td>" + "<td>" 
       + userlog.fromUserName + "</td>" + "<td>" 
       + userlog.createTime + "</td>" + "<td>" 
       + userlog.eventType + "</td>" ; 
     if(userlog.eventType=="LOCATION"){ 
      htmlobj = htmlobj + "<td><button name="+ userlog.eventType 
              + " location='"+userlog.details+"' class='btn btn-danger btn-lg btn-sm no-radius' data-toggle='modal' data-target='#myModal' onclick='showmodal(this)' >" 
              + "<i class='glyphicon glyphicon-map-marker'> LOCATION</i></button></td>"; 
     }else{ 
      htmlobj = htmlobj +"<td>"+ userlog.details + "</td>"; 
     }; 
     htmlobj = htmlobj + "</tr>"; 
     $("#userlogbody").append(htmlobj); 
     htmlobj = ""; 
    }); 
    //后台总页数与可见页数比较如果小于可见页数则可见页数设置为总页数, 
    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(); 
};</span>

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

7.结果截图:

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

以上所述是小编给大家介绍的Bootstrap jquery.twbsPagination.js动态页码分页实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
js实现拖拽功能
Mar 01 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 #Javascript
原生JS实现跑马灯效果
Feb 20 #Javascript
js 实现省市区三级联动菜单效果
Feb 20 #Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python类的实例化问题解决
2019/08/31 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
初任培训自我鉴定
2013/10/07 职场文书
夜大毕业生自我鉴定
2013/10/31 职场文书
英语感恩演讲稿
2014/01/14 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
护理心得体会范文
2016/01/22 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Oracle锁表解决方法的详细记录
2022/06/05 Oracle