使用方法

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. UESTC 883 方老师与两个串 --二分搜索+DP

    CF原题 由题可知,n,m太大,无法开出dp[n][m]的数组. 观察发现s/e最大为300,也就是说,选用第一种操作的次数不会超过300. 于是定义dp[i][j],第一个串的前i个数,使用了j次第 ...

  2. POJ 1847 Tram --set实现最短路SPFA

    题意很好懂,但是不好下手.这里可以把每个点编个号(1-25),看做一个点,然后能够到达即为其两个点的编号之间有边,形成一幅图,然后求最短路的问题.并且pre数组记录前驱节点,print_path()方 ...

  3. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  4. 002医疗项目-主工程模块yycgproject三层构建(三大框架的整合)

    先给出项目结构图:

  5. RDLC报表系列--------行分组报表

    报表分组开发步骤: 先看总体效果:如图 下面就做个看看... 1.先将数据处理成如下结构 如图 2.创建数据集DataSet.xsd,创建表->右键选择添加数据表->添加行(ctrl+L ...

  6. [4]Telerik Grid 简单使用方法

    1.columns <% Html.Telerik().Grid(Model) .Name("Orders") .Columns(columns => { //绑定列名 ...

  7. google project tango 学习笔记

    google io 2015上 project tango 的演示视频

  8. 验证视图状态 MAC 失败的解决办法

    昨天用户反应系统中有问题,问题就在于翻页的时候,系统会报以下错误.但是我们的系统已经上线1年多了,从来没出现过错误,怎么会出现错误呢?于是开始检测,查找原因. 1. 出错提示 “/”应用程序中的服务器 ...

  9. Caffe学习系列(16):caffemodel可视化

    通过前面的学习,我们已经能够正常训练各种数据了.设置好solver.prototxt后,我们可以把训练好的模型保存起来,如lenet_iter_10000.caffemodel. 训练多少次就自动保存 ...

  10. [CareerCup] 8.7 Chat Server 聊天服务器

    8.7 Explain how you would design a chat server. In particular, provide details about the various bac ...