标题: Bootstrap Table基本使用示例
作者: dnawo
日期: 2019-11-22 12:34 AM
分类: Web编程
内容: Bootstrap Table是一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能，一个基本的Bootstrap Table页面模板如下：
复制内容到剪贴板 程序代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Table基本使用示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入Bootstrap Table及关联样式-->
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
<!--内容-->
<!--引入Bootstrap Table及关联脚本-->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="//unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="//unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</body>
</html>
一、使用HTML属性设置Bootstrap Table
1、通过data-toggle="table"设置普通表
复制内容到剪贴板 程序代码<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、通过data-url设置使用远程URL数据
复制内容到剪贴板 程序代码<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
data1.json：
复制内容到剪贴板 程序代码[{
"id": "1",
"name": "Item 1",
"price": "$1"
}, {
"id": "2",
"name": "Item 2",
"price": "$2"
}]
3、通过data-pagination、data-search、data-sortable为表格增加分页、搜索、排序功能
复制内容到剪贴板 程序代码<table data-toggle="table" data-url="data1.json" data-pagination="true" data-search="true" data-sortable="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">Item ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
</table>
PS：必须table和th的data-sortable都为true，th的排序才会生效。
二、使用Javascript设置Bootstrap Table
1、通过Javascript设置普通表
复制内容到剪贴板 程序代码<table id="table"></table>
<script>
$('#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'
}]
})
</script>
2、通过url设置使用远程URL数据
复制内容到剪贴板 程序代码<script>
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
</script>
3、通过pagination、search、sortable为表格增加分页、搜索、排序功能
复制内容到剪贴板 程序代码<script>
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true,
sortable: true,
columns: [{
field: 'id',
title: 'Item ID',
sortable: true
}, {
field: 'name',
title: 'Item Name',
sortable: true
}, {
field: 'price',
title: 'Item Price',
sortable: true
}]
})
</script>
相关链接
[1].Bootstrap Table官网：https://bootstrap-table.com/
[2].Bootstrap Table中文网：https://www.bootstrap-table.com.cn/
[3].Bootstrap Table API：https://bootstrap-table.com/docs/api
[4].Bootstrap Table Examples：https://live.bootstrap-table.com/
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms