Bootstrap-table 實例
下載
官網地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/
文檔地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
下載解壓後可以看到如下目錄格式
bootstrap-table/
├── dist/
│ ├── extensions/
│ ├── locale/
│ ├── bootstrap-table.min.css
│ └── bootstrap-table.min.js
├── docs/
└── src/
├── extensions/
├── locale/
├── bootstrap-table.css
└── bootstrap-table.js
怎麼使用
下面就要引用我們需要的 css 和 js 文件了,我們可以新建一個文件夾專門用來放我們需要的文件。
環境搭建
新建目錄
src
├── css/
└── js/
拷貝
大家都是小白,也懶得去網上找下載,這裏我們就在之前從官網下載的那個文件夾裏面找,然後放到對應的目錄就可以了。
- docs/assets/bootstrap/css/bootstrap.min.css ------> css/bootstrap.min.css
- docs/assets/bootstrap/js/bootstrap.min.js ------> js /bootstrap.min.js
- docs/assets/js/jquery.min.js ------> js/jquery.min.js
- dist/bootstrap-table.min.css ------> css/bootstrap-table.min.css
- dist/bootstrap-table.min.js -----> js /bootstrap-table.min.js
- dist/locale/bootstrap-table-zh-CN.js -----> js/bootstrap-table-zh-CN.js
這樣我們就完成了這六個文件的拷貝工作…
引入
在 src 目錄新建 table_html 文件
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/bootstrap-table.css">
<script src="src/js/jquery.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
<script src="src/js/bootstrap-table.js"></script>
<script src="src/js/bootstrap-table-zh-CN.js"></script>
通過 data 屬性 使用
通過table的 data-url 屬性 指定數據源
<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>
通過 js
<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>
我們也可以通過設置遠程的 url 如 url: 'data1.json'
來加載數據。
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
{
"total": "10",
"rows": [
{
"id": "1",
"name":"1",
"price":"$1"
},
{
"id": "2",
"name":"2",
"price":"$1"
}
]
}
報錯
這個錯誤好像是 Jquery 訪問的跨域問題,網上有各種解決辦法,但是感覺好麻煩啊…於是只好把文件放到 Nginx 服務器上了。
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.