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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
vue cli 全面解析
2018/02/28 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python实现将元祖转换成数组的方法
2015/05/04 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
如何理解Python中的变量
2020/06/01 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
车间组长岗位职责
2013/12/20 职场文书
股权收购意向书
2014/04/01 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL