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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
javascript window对象属性整理
Oct 24 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
JS实现密码框效果
Sep 10 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
javascript创建和存储cookie示例
2014/01/07 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
使用python分析git log日志示例
2014/02/27 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python实现上传下载文件功能
2020/11/19 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python for i in range ()用法详解
2020/09/18 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Pycharm修改python路径过程图解
2020/05/22 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
家具商场的活动方案
2014/08/16 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
2014年小学工作总结
2014/11/26 职场文书
婚前保证书范文
2015/02/28 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript