2014年10月28日 星期二

Bootstrap Table Sorting

Bootstrap Table

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

當然因為是 bootstrap 延伸的,所以要放一下相關的 css 跟 js。
  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 就設定很方便。

  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


  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>  
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...