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 相关文章推荐
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
vue二级路由设置方法
Feb 09 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
vue 解决provide和inject响应的问题
Nov 12 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生成缩略图的类代码
2008/10/02 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php实现的mongodb操作类
2015/05/28 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
js处理包含中文的字符串实例
2017/10/11 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
python 实现二维列表转置
2019/12/02 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python自定义函数def的应用详解
2020/06/03 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
军神教学反思
2014/02/04 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
淘宝店策划方案
2014/06/07 职场文书
合作协议书模板2014
2014/09/26 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
运动会加油稿
2015/07/22 职场文书
2016银行求职自荐信
2016/01/28 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Python源码解析之List
2021/05/21 Python