使用方法

1、在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css。

  1. <link rel="stylesheet" href="bootstrap.min.css">
  2. <link rel="stylesheet" href="bootstrap-table.css">

2、在head标签或者在body标签闭合前(比较推荐)引入jQuery库和Bootstrap库(假如你的项目还没使用)和bootstrap-table.js。

  1. <script src="jquery.min.js"></script>
  2. <script src="bootstrap.min.js"></script>
  3. <script src="bootstrap-table.js"></script>

3、指定数据源,这里有两种方式

1)通过data属性标签

在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。

  1. <table data-toggle="table" data-url="data.json">
  2.     <thead>
  3.         ...   
  4. </thead>
  5. </table>

2)通过JavaScript设置数据源

通过JavaScript来启用带有id属性的Table。

  1. $('#table').bootstrapTable({
  2. url: 'data.json'
  3. }); 

关于参数请参照官网的文档

bootstrap table简洁扁平的表格的更多相关文章

  1. 【转】bootstrap table轻松实现数据表格

    在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...

  2. BootStrap table动态增删改表格内数据

    1:添加一个[操作]列   { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...

  3. Bootstrap Table 从新InsertRow 刷新表格 数据的问题处理方案

    1.第一步获取数据源 var rows = { //要插入的数据,这里要和table列名一致SkuCode: data.rows[i].SkuCode,BarCode: data.rows[i].Ba ...

  4. bootstrap table使用colResizable后表格不能自适应

    窗口缩小放大后,b表格不能自适应,table加了宽度没效果,求教

  5. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  6. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  7. [转]JS组件系列——表格组件神器:bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  8. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

随机推荐

  1. 第11章 Windows线程池(2)_Win2008及以上的新线程池

    11.2 Win2008以上的新线程池 (1)传统线程池的优缺点: ①传统Windows线程池调用简单,使用方便(有时只需调用一个API即可) ②这种简单也带来负面问题,如接口过于简单,无法更多去控制 ...

  2. MongoDB学习(二)Windows环境安装MongoDB

    MongoDB的官方下载站是http://www.mongodb.org/downloads,可以去上面下载最新的程序下来. 在下载页面可以看到,对操作系统支持很全面,OS X.Linux.Windo ...

  3. [ORACLE错误]ORA-00001: unique constraint (...) violated并不一定是数据冲突

    遇到这种情况,重建完表和索引后,终于正常INSERT了.  prompt Importing table COUPON_ACTIVITYset feedback offset define offin ...

  4. java 21 - 10 文本文件和集合之间互相存储数据

    有时候,我们会遇到单独写入数据到文本文件的情况.比如: 需求:把ArrayList集合中的字符串数据存储到文本文件 分析: A:ArrayList集合中存储的是String类 B:要存储的文件是文本文 ...

  5. 层叠上下文(The stacking context)

    MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...

  6. sp_executesql介绍和使用

    原文:http://www.cnblogs.com/wanyuan8/archive/2011/11/09/2243483.html execute相信大家都用的用熟了,简写为exec,除了用来执行存 ...

  7. MVC3中,在control里面三种Html代码输出形式

    MVC3中,在control里面三种Html代码输出形式:ViewData["msg"] = "<br /> Title <br />" ...

  8. WPF好看的进度条实现浅谈(效果有点类似VS2012安装界面)

    为了界面友好,一般的操作时间较长时,都需要增加进度条提示.由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果.后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料.学习了Mode ...

  9. js window.open()实现打印,如何在关闭打印窗口时刷新父窗口

    var childWin = window.open("your URL"); //获取子窗口句柄childWin.onunload = function(){ //onunloa ...

  10. HMAC-MD5算法原理及实现

    以下是分析节选,对于更详细的描述可以查阅RFC2104文档.     HMAC需要一个加密用散列函数(表示为H)和一个密钥K. 假设H是一个将数据块用一个基本的迭代压缩函数来加密的散列函数. 用B来表 ...