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 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
javascript变量声明实例分析
Apr 25 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
微信小程序设置滚动条过程详解
Jul 25 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
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
php支付宝接口用法分析
2015/01/04 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
AngularJS入门之动画
2016/07/27 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python中动态创建类实例的方法
2017/03/24 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
基于python3的socket聊天编程
2020/02/17 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
python实现学生信息管理系统源码
2021/02/22 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
西部世纪面试题
2014/12/05 面试题
技术总监管理职责范本
2014/03/06 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
计划生育汇报材料
2014/12/26 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
导游词之西安骊山
2019/12/20 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB