表格排序插件datatables

　　之前用过表格排序插件tinytables，用到后面，随着需求的更改，发现这个插件真的low到爆了，不适合用于多表格，只有一个表格的页面可以凑合着用，有很多局限性。

之后发现了一款表格排序插件datatables，功能强大（能够分页，排序，搜索），且有官网，基本满足需求，并且可以适用于多表格，唯一有点不足就是，加载会稍微有点慢。

实例:

html：

<table id="table1" cellpadding="" cellspacing="" border="" class="hover">
　　<thead>
　　　　<tr>
　　　　　　<th> fdafdadka</th>
　　　　　　<th> Ticker </th>
　　　　　　<th> Company </th>
　　　　　　<th> Industry </th>
　　　　　　<th> Market Cap(MM) </th>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>

　　　　　　<td></td>
　　　　　　<td></td>
　　　　　　<td></td>
　　　　　　<td></td>
　　　　　　<td></td>

　　　　</tr>
　　</tbody>
</table>

初始化表格:

js:

var table1 = $('#table1').DataTable({
　　"aLengthMenu": [[, , , , -], ["", "", "","", "All"]],//第一组数量，第二组说明文字
　　columnDefs:[{
　　　　 type: 'natural', targets: ,
　　 },{
　　　　'targets' : [,],//第一列不排序
　　　　'orderable' : false
　　 },{
　　//设置不参与搜索
　　"targets":[,,,,,,,,,],
　　"searchable":false
　　}]
});

$('#table1 tbody').on( 'click', 'tr', function () {
　　$(this).toggleClass('selected');
} );

-api:http://hereson.iteye.com/blog/2032425
-官网:https://www.datatables.net/
https://datatables.net/plug-ins/sorting/
-排序插件（类型检测） ：http://www.datatables.club/example/plug-ins/sorting_auto.html
-尽管Datatables可以自动排序字母或者数字，但是在处理更复杂的数据格式，可以自定义排序的规则，datatables写好了些排序插件给我们使用
-自然排序（数字英文结合）：https://datatables.net/plug-ins/sorting/natural

//-----------------------------------------------------------------

通过ajax调用数据初始化表格

　　　　　　　　　　//js
　　　　　　　　　　table8=$('#table8').DataTable( {
                    "ajax": "User/showStock",
                    "columns": [
                        { "data": "code" },
                        { "data": "company" },
                        { "data": "section" },
                        { "data": "market_value" },
                        { "data": "price" },
                        { "data": "div" },
                        { "data": "last_report_date" },
                        { "data": "next_report_date" },
                        { "data": "days_after_last_earning" },
                        { "data": "days_before_next_earning" },
                        { "data": "rank_cur_fs" },
                        { "data": "rank_fs-1" }
                    ]
　　　　　　　　　　})

html：

　　　　　　　　　　　　<table id="table8" cellpadding="" cellspacing="" border="" class="hover">
                        <thead>
                            <tr>
                                <th> Ticker </th>
                                <th> Company </th>
                                <th> Industry </th>
                                <th> Market Cap(MM) </th>
                                <th> Price</th>
                                <th> Yield </th>
                                <th class="lastReport"> Last Report Date </th>
                                <th class="nextReport"> Next Report Date </th>
                                <th> Days After Last Earning</th>
                                <th> Days Before Next Earning</th>
                                <th> Perform </th>
                                <th> Perform- </th>
                            </tr>
                        </thead>
                    </table>

例子：https://datatables.net/examples/ajax/objects.html

【注意】表格只能初始化一次，如果碰到需要多次初始化的情况，则可以参考文章：https://datatables.net/manual/tech-notes/3

解决方案：

                table8=$('#table8').DataTable({});
                table8.destroy();//销毁表格
                table8=$('#table8').DataTable( {
                    "ajax": "User/showStock",
                    "columns": [
                        { "data": "code" },
                        { "data": "company" },
                        { "data": "section" },
                        { "data": "market_value" },
                        { "data": "price" },
                        { "data": "div" },
                        { "data": "last_report_date" },
                        { "data": "next_report_date" },
                        { "data": "days_after_last_earning" },
                        { "data": "days_before_next_earning" },
                        { "data": "rank_cur_fs" },
                        { "data": "rank_fs-1" }
                    ],
                    "aLengthMenu": [[, , , , -], ["", "", "","", "All"]],//第一组数量，第二组说明文字
                    columnDefs:[{
                    　　　　 type: 'natural', targets: ,
                　　     },{
                    　　　　'targets' : [],//第一列不排序
                    　　　　'orderable' : false
                　　     },{
                             //设置不参与搜索
                            "targets":[,,,,,,,,],
                            "searchable":false
                    }]
                } );    

【注意】这样的时候，虽然可以实现功能，但是插件会自动弹出warning，有的时候，为了禁止弹出warning，我们可以去jquery.dataTables.min.js里面将errMode:"alert"给注释掉，这个时候就不会再弹出warning了。