Bootstrap Table Sorting

Bootstrap Table

bootstrap 真是好工具，由他延伸出來的東西也超多的，這次要做可以升冪降冪排序的表格，稍微google一下就找到了。

當然因為是 bootstrap 延伸的，所以要放一下相關的 css 跟 js。

view plaincopy to clipboardprint

1. <link rel="stylesheet" href="bootstrap.min.css">  
2. <link rel="stylesheet" href="bootstrap-table.css">  
3. <script src="jquery.min.js"></script>  
4. <script src="bootstrap.min.js"></script>  
5. <script src="bootstrap-table.js"></script>  

可以直接在 html 就設定很方便。

view plaincopy to clipboardprint

1. <table data-url="data1.json" data-height="299" data-sort-name="name" data-sort-order="desc">  
2.     <thead>  
3.         <tr>  
4.             <th data-field="id" data-align="right" data-sortable="true">Item ID</th>  
5.             <th data-field="name" data-align="center" data-sortable="true">Item Name</th>  
6.             <th data-field="price" data-sortable="true">Item Price</th>  
7.         </tr>  
8.     </thead>  
9. </table>  

或是用 js

view plaincopy to clipboardprint

1. <table id="table-javascript"></table>   
2. <script>   
3.     $(function () {   
4.         $('#via-javascript-table').next().click(function () {   
5.             $(this).hide();   
6.   
7.             $('#table-javascript').bootstrapTable({   
8.                 method: 'get',   
9.                 url: 'data2.json',   
10.                 cache: false,   
11.                 height: 400,   
12.                 striped: true,   
13.                 pagination: true,   
14.                 pageSize: 50,   
15.                 pageList: [10, 25, 50, 100, 200],   
16.                 search: true,   
17.                 showColumns: true,   
18.                 showRefresh: true,   
19.                 minimumCountColumns: 2,   
20.                 clickToSelect: true,   
21.                 columns: [{   
22.                     field: 'state',   
23.                     checkbox: true  
24.                 }, {   
25.                     field: 'id',   
26.                     title: 'Item ID',   
27.                     align: 'right',   
28.                     valign: 'bottom',   
29.                     sortable: true  
30.                 }, {   
31.                     field: 'name',   
32.                     title: 'Item Name',   
33.                     align: 'center',   
34.                     valign: 'middle',   
35.                     sortable: true,   
36.                     formatter: nameFormatter   
37.                 }, {   
38.                     field: 'price',   
39.                     title: 'Item Price',   
40.                     align: 'left',   
41.                     valign: 'top',   
42.                     sortable: true,   
43.                     formatter: priceFormatter,   
44.                     sorter: priceSorter   
45.                 }, {   
46.                     field: 'operate',   
47.                     title: 'Item Operate',   
48.                     align: 'center',   
49.                     valign: 'middle',   
50.                     clickToSelect: false,   
51.                     formatter: operateFormatter,   
52.                     events: operateEvents   
53.                 }]   
54.             });   
55.         });   
56.     });   
57. </script>