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 在线压缩和格式化收藏
Jan 16 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
javascript的内存管理详解
Aug 07 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
vue前端工程的搭建
Mar 31 Vue.js
分享一道关于闭包、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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP源码之explode使用说明
2011/08/05 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP实现合并discuz用户
2015/08/05 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
javascript实现画板功能
2020/04/12 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python中title()方法的使用简介
2015/05/20 Python
Python_LDA实现方法详解
2017/10/25 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python实现随机加减法生成器
2020/02/24 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python如何省略括号方法详解
2020/03/21 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Python接口自动化测试的实现
2020/08/28 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
工程类专业自荐信范文
2014/03/09 职场文书
水电站项目建议书
2014/05/12 职场文书
单位在职证明书
2014/09/11 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书