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 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
python文件和目录操作函数小结
2014/07/11 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python bisect模块原理及常见实例
2020/06/17 Python
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
领导检查欢迎词
2014/01/14 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python