使用方法

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

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

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

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

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

1)通过data属性标签

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

<table data-toggle="table" data-url="data.json">
            <thead>
                ...   
            </thead>
        </table>

2)通过JavaScript设置数据源

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

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

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

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. C语言异或运算在程序设计中的妙用

    异或运算符∧也称XOR运算符.它的规则是若参加运算的两个二进位同号,则结果为0(假):异号则为1(真).即0∧0=0,0∧1=1,1∧1=0. 性质: (1).与1异或会翻转 (2).与0异或保持不变 ...

  2. 使用appscan实现多站扫描简单自动化

    因为appscan在新建扫描任务的时候只能输入一个target,并且没有awvs/nessus那样提供web接口,导致我以前一直以为appscan不能像awvs那样批量建立任务自动扫描. 不过,今天要 ...

  3. .NET深入 c#数据类型2

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. SQLite 解决:Could not load file or assembly 'System.Data.SQLite ... 试图加载格式不正确的程序/or one of its dependencies. 找不到指定的模块。

     Could not load file or assembly 'System.Data.SQLite.dll' or one of its dependencies. 找不到指定的模块. 错误提示 ...

  5. Cobbler自动化批量安装linux服务器的操作记录

    Cobbler为何物?Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命 ...

  6. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  7. RDLC系列之四 常见错误

    解决 RDLC 报表自动分页表头显示问题 原文:http://www.th7.cn/Program/net/201207/85445.shtml RDLC是用XML来描述一个报表相关的一切,只需要在& ...

  8. 微软职位内部推荐-Software Development Engineer 2

    微软近期Open的职位: SDE II Organization Summary: Engineering, Customer interactions & Online (ECO) is l ...

  9. 什么是json

    http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html http://edu.51cto.com/lesson/id-71123 ...

  10. no.5.print sum

    #-*-coding=utf-8-*- for a in range(1,50,1): for b in range(1,50,1): for c in range(1,50,1): if a+b+c ...