第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题。

===================

|  引入CSS文件

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

|  引入相关库

我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>

|  启用Bootstrap Table插件:

官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:

1,通过data属性的方式:

<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>

  

2,通过js的方式:

//只需要HTML中写下table标签,并设置id
<table id="table"></table>

 

$('#table').bootstrapTable({
columns: [{
field: 'id',    
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});

也可以通过url获取数据

$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',    //与返回值的JSON数据的key值对应
title: 'Item ID'  //列名
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});

Bootstrap-table学习笔记(一)的更多相关文章

  1. .Net MVC+bootstrap Table学习

    一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...

  2. Bootstrap 基础学习笔记(一)

    排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

  3. bootstrap 新手学习笔记 代码整理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap入门学习笔记(只记录了效果)

    基本头文件 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <me ...

  5. Boostrap Table学习笔记

    最近要对项目上的table进行调整,让表格能够支持更多的操作,于是接触到了boostrapTable这个插件.研究了一天,记录下学习的内容. Boostrap Table可以支持表的分页及动态显示表的 ...

  6. LUA table学习笔记

    function printT( ... ) for i,v in ipairs(...) do print(i,v) end end t1={} t2={} t3={} table.insert(t ...

  7. Bootstrap 3学习笔记 -栅格

    这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块 ...

  8. Bootstrap 新手学习笔记——布局组件

    1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font ...

  9. Bootstrap新手学习笔记——css

    Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"&g ...

  10. bootstrap table 学习记录

    效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...

随机推荐

  1. ASP.NET MVC CheckBoxFor的int to bool

    当我们使用CheckBoxFor类型需要使用bool ,可以将 int转换成bool <div class="form-group"> <label class= ...

  2. C++中int转为char 以及int 转为string和string 转int和字符串的split

    1.对于int 转为char 直接上代码: 正确做法: void toChar(int b) { char u; ]; _itoa( b, buffer, ); //正确解法一 u = buffer[ ...

  3. 正式学习React(四) ----Redux源码分析

    今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js import isPlainObject from ' ...

  4. React Native之持久化存储(AsyncStorage、react-native-storage)的使用

    AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...

  5. Java的Collection集合的常用方法

    boolean add(E e) 添加元素到Collection集合中. boolean addAll(Collection<? extends E> c) 将指定c中的所有元素都添加到此 ...

  6. mysql入门语句

    连接 1.mysql -h localhost -u root -p ******(回车) 2.mysql -h localhost -u root -p(回车) ****** 3.mysql -u ...

  7. windows 服务器恢复选项恢复

    用户的服务器成了酱紫

  8. JAVA实现计算三角形等平面图形的夹角问题

    问题重现 现在一平面上有三点,分别是x(x1,x2),y(y1,y2),z(z1,z2),图形大致如下 现要求用java代码求出∠YxZ的度数. 问题分析及数学模型 1.要求两直线的夹角,就想到数学中 ...

  9. TCP中间件_个人方案

    按照功能分类,不管是直接的 insert/delete/update/select语句 还是 调用存储过程,基本的功能 就是 增删改查.又分为两大类: (1).查询(会返回结果集的),(2).非查询( ...

  10. AtCoder ARC097C Sorted and Sorted:dp

    传送门 题意 有 $ 2n $ 个球排成一行,其中恰好有 $ n $ 个白球和 $ n $ 个黑球.每个球上写着数字,其中白球上的数字的并集为 $ \lbrace 1 \dots n\rbrace $ ...