官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
使用之前加上头文件：
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="bootstrap-table/bootstrap-table.js"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.js"></script>
data-toggle
不写JavaScript直接启用table。
- 使用方法：无需编写 JavaScript 启用 bootstrap table，对普通的 table 设置 data-toggle="table" 即可。
- 代码示例：
<table data-toggle="table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>证件号</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>11122</td>
</tr>
<tr>
<td>李四</td>
<td>26</td>
<td>33322</td>
</tr>
</tbody>
</table>
- 效果：
image.png
实际情况下我们一般使用JavaScript方式来启用Bootstrap Table，代码如下：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
data: [{
name: '张三',
age: '18',
id: '11122'
}, {
name: '李四',
age: '26',
id: '33322'
}]
});
</script>
显示效果同上。
columns为列配置项，data为填入表格的数据，数据格式为json。
url
服务器数据的加载地址。实际应用中我们不会把数据写在前台然后用data来加载，而是从后台请求数据填入表格中，url便是后台地址。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}]
});
</script>
这里没有写后台，就用本地文件data1.json来代替。data1.json文件内容如下：
[{"name":"张三","age":"18","id":"11122"},{"name":"李四","age":"26","id":"22233"}]
classes
表格的类名称。可用的样式见bootstrap全局css样式。
height
表格高度，数据类型为number。
undefinedText
当数据为 undefined 时显示的字符，默认是"-"，可以自己定义，例如:
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据'
});
添加一项数据：{"name":"李四","age":"26"}，项“id”没有数据，显示效果则为：
image.png
striped
设置为true时有隔行变色的效果，默认是false。
排序：
sortName
定义排序列,通过url方式获取数据填写字段名，否则填写下标。
sortOrder
定义排序方式 'asc' 或者 'desc'，'asc'为升序，'desc'为降序。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc'
});
</script>
- 效果：
image.png
分页:
pagination
默认false,设置为 true 会在表格底部显示分页条。
pageSize
每页显示的数据条数，数据类型为Number。
pageNumber
第一页的页码数，数据类型为Number。
paginationPreText
指定分页条中上一页按钮的图标或文字，默认是“<”。
paginationNextText
指定分页条中下一页按钮的图标或文字，默认是“>”。
- 示例代码：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
pagination:'true',
pageSize:1,
pageNumber:1,
paginationPreText:'<--',
paginationNextText:'-->'
});
</script>
- 效果：
image.png
paginationVAlign
指定分页条在垂直方向的位置。'top' or 'bottom' or 'bonth'。
paginationHAlign
指定分页详细信息在水平方向的位置。'left' or 'right'。
- 例如我想使分页条上下都有，并且偏左侧，可以这么写代码：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
pagination:'true',
pageSize:1,
pageNumber:1,
paginationPreText:'<--',
paginationNextText:'-->',
paginationVAlign:'both',
paginationHAlign:'left'
});
- 效果：
image.png
搜索框
search
默认为false，设置为true时启用搜索框。
searchOnEnterKey
设置为 true时，按回车触发搜索方法，否则无需按键自动触发搜索方法，默认为false。
searchText
设置初始搜索文字
strictSearch
设置为 true启用全匹配搜索，否则为模糊搜索
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
undefinedText:'没有数据',
striped:true,
sortName:'age',
sortOrder:'asc',
search:'true',
searchOnEnterKey:true,
searchText:'张三',
strictSearch:true
});
</script>
- 效果
初始：
image.png
搜索李四：
image.png
网友评论