[TOC] ## From Html ``` <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> ``` ## From url >[danger]當我們不需要分頁時。我們直接將 以前的些的 rows 屬性 替換為data 如果執意要用 rows則要和 total屬性配合使用。可以試著關閉分頁書想法 ?好像是將 某個屬性設為false即可 我們還可以通過設置在正常表上來使用遠程 URL 數據。`data-url` ~~~html <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": 0, "name": "Item 0", "price": "$0", "amount": 3 }, { "id": 1, "name": "Item 1", "price": "$1", "amount": 4 }, { "id": 2, "name": "Item 2", "price": "$2", "amount": 8 }, { "id": 3, "name": "Item 3", "price": "$3", "amount": 2 }, { "id": 4, "name": "Item 4", "price": "$4", "amount": 90 }, { "id": 5, "name": "Item 5", "price": "$5", "amount": 2 }, { "id": 6, "name": "Item 6", "price": "$6", "amount": 3 }, { "id": 7, "name": "Item 7", "price": "$7", "amount": 7 }, { "id": 8, "name": "Item 8", "price": "$8", "amount": 39 }, { "id": 9, "name": "Item 9", "price": "$9", "amount": 78 }, { "id": 10, "name": "Item 10", "price": "$10", "amount": 30 }, { "id": 11, "name": "Item 11", "price": "$11", "amount": 32 }, { "id": 12, "name": "Item 12", "price": "$12", "amount": 12 }, { "id": 13, "name": "Item 13", "price": "$13", "amount": 76 }, { "id": 14, "name": "Item 14", "price": "$14", "amount": 10 }, { "id": 15, "name": "Item 15", "price": "$15", "amount": 9 }, { "id": 16, "name": "Item 16", "price": "$16", "amount": 8 }, { "id": 17, "name": "Item 17", "price": "$17", "amount": 1 }, { "id": 18, "name": "Item 18", "price": "$18", "amount": 99 }, { "id": 19, "name": "Item 19", "price": "$19", "amount": 100 }, { "id": 20, "name": "Item 20", "price": "$20", "amount": 109 } ] ``` 您也可以添加，并添加到一個表，如以下表。`pagination(分頁)` `search(搜索框)` `sorting(排序)`等 ~~~html <table data-toggle="table" data-url="data1.json" data-pagination="true" data-search="true"> <thead> <tr> <th data-sortable="true" data-field="id">Item ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> ~~~ ## From Data 通過 JavaScript 傳入帶id的數據 ~~~html <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> ~~~ ## From URL 我們也可以通過設置使用遠程 URL 數據。`url: 'url地址'` ~~~javascript $('#table').bootstrapTable({ url: 'data1.json', columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }] }) ~~~ 您也可以添加，并添加到一個表，如以下表。`pagination` `search` `sorting`等 ~~~javascript $('#table').bootstrapTable({ url: 'data1.json', pagination: true, search: true, columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }] }) ~~~