jQuery表格插件datatables用法總結（下）

使用總結：

1. 要導入CSS 和 JS

   <link href="/static/css/bootstrap.min.css" rel="stylesheet">
   <link href="/static/css/jquery.dataTables.min.css" rel="stylesheet">
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.min.js"></script>
   <script src="/static/js/jquery.dataTables.min.js"></script>

2. 定義table

    

    <table class="table table-striped" id="giatable">

        <thead>

            <tr>

               <th>GIA</th>

               <th>...</th>

  </tr>

         </thead>

    <tbody>

<tr>

<td>...</td>

</tr>

    </tbody>

    </table>

3. 使用datatable

<script>

    $(document).ready(function () {

        $('#giatable').dataTable({

            "aaSorting": [

                [0, ""]   //默認以第一列升序排列，"" 能夠關掉排序

            ],

            "aoColumnDefs": [

                {"bSearchable": true, "bVisible": true, "bSortable": true, "aTargets": [0, 1, 2, 3, 4, 7, 8]}, //第0 1 2 3 4 7 8 能夠搜索可排序

                {"bSortable": false, "aTargets": [9, 10]} //第9 10 不可排序

            ],

            "bAutoWidth": false, //自適應寬度

           // "aaSorting": [[1, "asc"]],

            "sPaginationType": "full_numbers",

            "oLanguage": {

                "sProcessing": "正在加載中......",

                "sLengthMenu": "每頁顯示 _MENU_ 條記錄",

                "sZeroRecords": "對不起，查詢不到相關數據！",

                "sEmptyTable": "表中無數據存在！",

                "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",

                "sInfoFiltered": "數據表中共爲 _MAX_ 條記錄",

                "sSearch": "當前結果內搜索",

                "oPaginate": {

                    "sFirst": "首頁",

                    "sPrevious": "上一頁",

                    "sNext": "下一頁",

                    "sLast": "末頁"

                }

            }

        })

    });

</script>