bootstrap table表格客户端分页实例


Posted in Javascript onAugust 07, 2017

一、前言

    bootstrap-table是非常方便好用的前端表格分页插件,使用者只需要提供数据源就能实现非常完美的分页效果,其分页方式可以分成客户端分页和服务端分页,其接收的数据源都是json数据格式。服务端分页在项目中应用得非常的广泛,但有时也需要使用客户端分页来加快分页速度,加快分页浏览效率。本篇博客就不介绍服务端分页,只提供bootstrap-table客户端分页的简单例子(数据源也从前端获取),供初学者了解使用。

二、实例

<title>bootstrap-table表格客户端分页</title> 
 
 <link rel="stylesheet" href="./bootstrap/css/bootstrap/bootstrap.css" rel="external nofollow" /> 
 <link rel="stylesheet" href="./bootstrap-table/bootstrap-table.css" rel="external nofollow" />  
  
 <script src="./jquery/jquery.min.js"></script> 
 <script src="./bootstrap/js/bootstrap.js"></script> 
 <script src="./bootstrap-table/bootstrap-table.js"></script> 
 <script src="./bootstrap-table/bootstrap-table-export.js"></script> 
 <script src="./extends/tableExport/jquery.base64.js"></script> 
 <script src="./extends/tableExport/tableExport.js"></script> 
 
</head> 
 
<body > 
 <div id="reportTableDiv" > 
  <table id="reportTable"></table> 
 </div> 
 <script type="text/javascript"> 
 //手动制造30条数据 
 var datas = []; 
 for(var i=0;i<30;i++){ 
  datas[i]={"name":"傻逼"+i+"号","age":"年龄:"+i+"岁","sex":"男"+i} 
 } 
  
 $(function () { 
  $('#reportTable').bootstrapTable({ 
   method: 'get', 
   cache: false, 
   height: 400, 
   striped: true, 
   pagination: true, 
   pageSize: 20, 
   pageNumber:1, 
   pageList: [10, 20, 50, 100, 200, 500], 
   search: true, 
   showColumns: true, 
   showRefresh: false, 
   showExport: false, 
   exportTypes: ['csv','txt','xml'], 
   search: true, 
   clickToSelect: true, 
   columns: 
   [ 
    {field:"checked",checkbox:true}, 
    {field:"name",title:"测试姓名",align:"center",valign:"middle",sortable:"true"}, 
    {field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"}, 
    {field:"sex",title:"性别",align:"center",valign:"middle",sortable:"true"}, 
   ], 
   data:datas, 
  });          
 }); 
 </script> 
<div> 
  
</body> 
</html>

三、总结

    1. bootstrap-table客户端分页只需要几个步骤即可实现:引入bootstrap的js、css;html页面添加一个table标签同时给id赋值;js添加初始化代码;

    2.bootstrap-table客户端分页的数据源可以是服务器端传递过来,也可以是前端js获取,该实例使用的是前端js的数据源,初始化参数需要添加data,同时去掉url;

   3.本博客的实例下载路径

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 #Javascript
react native实现往服务器上传网络图片的实例
Aug 07 #Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 #Javascript
ES6新增的math,Number方法
Aug 06 #Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 #Javascript
JS解析url查询参数的简单代码
Aug 06 #Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 #Javascript
You might like
php中目录,文件操作详谈
2007/03/19 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Django异步任务线程池实现原理
2019/12/17 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
业务总经理岗位职责
2014/02/03 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年组织部工作总结
2015/04/03 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS