使用方法

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. 【Windows phone 8】欢迎引导页面02

    [目标]前一篇文章已经实现了图片的切换,这里需要限制pivot的循环滚动. [思路]通过手势事件,对第一张,最后一张图片处加以限制 [前台] 在pivot处加上 <toolkit:Gesture ...

  2. pre标签避免一行过长打破格局

    pre{ white-space:pre-wrap; word-wrap:break-word; word-break:break-all }

  3. 史上最全Html与CSS布局技巧

    单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父 ...

  4. [CareerCup] 9.4 Subsets 子集合

    9.4 Write a method to return all subsets of a set. LeetCode上的原题,请参见我之前的博客Subsets 子集合和Subsets II 子集合之 ...

  5. iOS中偏好设置的创建,数据写入与读取

    NSUserDefaults与NSDictinary? 应用通过NSUserDefaults用键值对的方式来读取和保存偏好设置数据,与通过键从NSDictionary对象中获取数据一样,不同之处在于N ...

  6. iOS中UIMenuController的使用

    不知你有没有发现,在你的微信朋友中,长按一段文字(正文或者评论),会弹出这样子的玩意: 要想在你的view或者viewController中实现长按弹出菜单栏你必须要调用becomeFirstResp ...

  7. Java四种引用包括强引用,软引用,弱引用,虚引用。

    Java四种引用包括强引用,软引用,弱引用,虚引用. 强引用: 只要引用存在,垃圾回收器永远不会回收Object obj = new Object();//可直接通过obj取得对应的对象 如obj.e ...

  8. VC++中复制对话框资源 之较好方法之一

    资源对话框的编写有时候较为麻烦,这里我成功实现了这个方法的可用性,具体如下: 碰到模块移植问题了,自己做的对话框类(继承于CDialog)要移植到目标工程中.在网上搜了几个帖子发现都说的很生涩.   ...

  9. python实现简易数据库之三——join多表连接和group by分组

    上一篇里面我们实现了单表查询和top N查询,这一篇我们来讲述如何实现多表连接和group by分组. 一.多表连接 多表连接的时间是数据库一个非常耗时的操作,因为连接的时间复杂度是M*N(M,N是要 ...

  10. VS 2010配置Qt 4.8.5

    由于早上偶然的一个念想,今天的宝贵时光就奉献给了Qt的安装及其和VS 2010的配置上了. 说实话,开始时真的查找了资料,包括博客.文库.知道等等,作者们写得都很全面,细致. 但自己动手尝试就是错误百 ...