官网地址: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/
大家都是小白,也懒得去网上找下载,这里我们就在之前从官网下载的那个文件夹里面找,然后放到对应的目录就可以了。
这样我们就完成了这六个文件的拷贝工作…
在 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>
通过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>
<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.