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

 更新时间:2017年02月20日 10:30:23   作者:_PPB  
这篇文章主要介绍了Bootstrap jquery.twbsPagination.js动态页码分页实例代码,需要的朋友可以参考下

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

参考网址:分页参考文档

1.风格样式:

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动态页码分页实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript中对变量类型的判断方法

    javascript中对变量类型的判断方法

    在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String;复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Function, Date等等
    2015-08-08
  • Javascript Cookie读写删除操作的函数

    Javascript Cookie读写删除操作的函数

    Javascript Cookie读写删除操作的函数代码,需要操作cookies的朋友可以参考下。
    2010-03-03
  • 详解微信UnionID作用

    详解微信UnionID作用

    这篇文章主要介绍了微信UnionID作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 详解JS数组Reduce()方法详解及高级技巧

    详解JS数组Reduce()方法详解及高级技巧

    reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
    2017-08-08
  • javaScript 实现重复输出给定的字符串的常用方法小结

    javaScript 实现重复输出给定的字符串的常用方法小结

    这篇文章主要介绍了javaScript 实现重复输出给定的字符串的常用方法,总结分析了JavaScript重复输出给定字符串的4种常见操作技巧,需要的朋友可以参考下
    2020-02-02
  • 微信小程序点击保存图片到本机功能

    微信小程序点击保存图片到本机功能

    这篇文章主要介绍了微信小程序点击保存图片到本机功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 基于JavaScript伪随机正态分布代码实例

    基于JavaScript伪随机正态分布代码实例

    这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • return false;和e.preventDefault();的区别

    return false;和e.preventDefault();的区别

    Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
    2010-07-07
  • JavaScript数组实例的9个方法

    JavaScript数组实例的9个方法

    这篇文章主要介绍了JavaScript数组实例的9个方法,文章围绕主题展开详细的内容介绍没具有一定的参考价值,需要的朋友可以参考一下
    2022-07-07
  • 用JS实现轮播图效果(二)

    用JS实现轮播图效果(二)

    这篇文章主要介绍了用JS实现轮播图效果(二)的相关资料,需要的朋友可以参考下
    2016-06-06

最新评论