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>