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 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
js选项卡的制作方法
Jan 23 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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获取数组最大值下标的方法
2015/05/12 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
js 页面输出值
2008/11/30 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
python操作日期和时间的方法
2014/03/11 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python素数检测实例分析
2015/06/15 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
详解Swift中属性的声明与作用
2016/06/30 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python的socket编程入门
2018/01/29 Python
Python 硬币兑换问题
2019/07/29 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
单位未婚证明范本
2014/11/25 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
公司业务员管理制度
2015/08/05 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android