bootstrap table小案例


Posted in Javascript onOctober 21, 2016

Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。

1、所需要的库:

    bootstrap.min.css

    bootstrap-table.css

    jquery.min.js

    bootstrap.min.js

    bootstrap-table.js

2、Bootstrap Table获取数据的方式:

    Bootstrap Table通过data属性标签或者JavaScript来显示表格数据:

(1)、通过data属性标签

 在表格中设置data-toggle=“table”,此方式可以在不写JavaScript的情况下启用Bootstrap Table。

<table data-toggle="table" data-url="data.json">
  <thead>
    ...
  </thead>
</table>

(2)、通过JavaScipt向表格传入数据:

<table id="table"></table>
      <1>、简单的静态数据

        $('#table').bootstrapTable({        
          columns: [{
            field: 'id',
            title: 'Item ID'
          }, {
            field: 'username',
            title: 'Item Username'
          }, {
            field: 'password',
            title: 'Item Passowrd'
          }],
          data: [{
            id: 1,
            username: 'Item 1',
            passowrd: '$1'
          }, {
            id: 2,
            username: 'Item 2',
            password: '$2'
          }]});
           <2>、通过url获取数据

        $('#table').bootstrapTable({        
          url: 'data1.json',
          columns: [{
            field: 'id',
            title: 'Item ID'
          }, {
            field: 'username',
            title: 'Item Username'
          }, {
            field: 'passowrd',
            title: 'Item Passowrd'
          }, ]});

3、Bootstrap Table简单的demo:

<!doctype html>
<html>
  <head>
  
    <meta charset="utf-8">
    
    <title>Bootstrap Table的demo</title>
    
    <link rel="stylesheet" href="bootstrap.css">
    
    <link rel="stylesheet" href="bootstrap-table.css">
  
  </head>
  
<body>
 <table id="table"></table>
<!--引入相关的js文件-->
 <script src="jquery.min.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
  
 <!--自定义javaScript-->
 <script>
   $('#table').bootstrapTable({
    columns: [{
      field: 'id',
      title: 'Item ID'
      }, {
      field: 'username',
      title: 'Item Username'
      }, {
      field: 'passsword',
      title: 'Item Password'
    }],
    data: [{
      id: 1,
      username: 'Item 1',
      passowrd: '123'
      }, {
      id: 2,
      username: 'Item 2',
      passowrd: '123
      }]
   });
 </script>
</body>
</html>

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

Javascript 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
jquery+Jscex打造游戏力度条
Sep 12 #Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 #Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
利用Node.JS实现邮件发送功能
Oct 21 #Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 #Javascript
BootStrap网页中代码显示用法详解
Oct 21 #Javascript
You might like
反射调用private方法实践(php、java)
2015/12/21 PHP
PDO::_construct讲解
2019/01/27 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
javascript中的delete使用详解
2013/04/11 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
javascript Canvas动态粒子连线
2020/01/01 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python和opencv实现抠图
2018/07/18 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
pycharm的python_stubs问题
2020/04/08 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python 中如何写注释
2020/08/28 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
自荐信格式的六要素
2013/09/21 职场文书
中国梦读书活动总结
2014/07/10 职场文书
运动会报道稿300字
2014/10/02 职场文书
2014年质检工作总结
2014/11/26 职场文书
革命电影观后感
2015/06/18 职场文书
学校隐患排查制度
2015/08/05 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
python中如何对多变量连续赋值
2021/06/03 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android