Bootstrap-table学习笔记(一)
第一次使用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学习笔记(一)的更多相关文章
- .Net MVC+bootstrap Table学习
一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...
- Bootstrap 基础学习笔记(一)
排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都 ...
- bootstrap 新手学习笔记 代码整理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap入门学习笔记(只记录了效果)
基本头文件 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <me ...
- Boostrap Table学习笔记
最近要对项目上的table进行调整,让表格能够支持更多的操作,于是接触到了boostrapTable这个插件.研究了一天,记录下学习的内容. Boostrap Table可以支持表的分页及动态显示表的 ...
- LUA table学习笔记
function printT( ... ) for i,v in ipairs(...) do print(i,v) end end t1={} t2={} t3={} table.insert(t ...
- Bootstrap 3学习笔记 -栅格
这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块 ...
- Bootstrap 新手学习笔记——布局组件
1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font ...
- Bootstrap新手学习笔记——css
Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"&g ...
- bootstrap table 学习记录
效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...
随机推荐
- ASP.NET MVC CheckBoxFor的int to bool
当我们使用CheckBoxFor类型需要使用bool ,可以将 int转换成bool <div class="form-group"> <label class= ...
- C++中int转为char 以及int 转为string和string 转int和字符串的split
1.对于int 转为char 直接上代码: 正确做法: void toChar(int b) { char u; ]; _itoa( b, buffer, ); //正确解法一 u = buffer[ ...
- 正式学习React(四) ----Redux源码分析
今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js import isPlainObject from ' ...
- React Native之持久化存储(AsyncStorage、react-native-storage)的使用
AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...
- Java的Collection集合的常用方法
boolean add(E e) 添加元素到Collection集合中. boolean addAll(Collection<? extends E> c) 将指定c中的所有元素都添加到此 ...
- mysql入门语句
连接 1.mysql -h localhost -u root -p ******(回车) 2.mysql -h localhost -u root -p(回车) ****** 3.mysql -u ...
- windows 服务器恢复选项恢复
用户的服务器成了酱紫
- JAVA实现计算三角形等平面图形的夹角问题
问题重现 现在一平面上有三点,分别是x(x1,x2),y(y1,y2),z(z1,z2),图形大致如下 现要求用java代码求出∠YxZ的度数. 问题分析及数学模型 1.要求两直线的夹角,就想到数学中 ...
- TCP中间件_个人方案
按照功能分类,不管是直接的 insert/delete/update/select语句 还是 调用存储过程,基本的功能 就是 增删改查.又分为两大类: (1).查询(会返回结果集的),(2).非查询( ...
- AtCoder ARC097C Sorted and Sorted:dp
传送门 题意 有 $ 2n $ 个球排成一行,其中恰好有 $ n $ 个白球和 $ n $ 个黑球.每个球上写着数字,其中白球上的数字的并集为 $ \lbrace 1 \dots n\rbrace $ ...