之前用过表格排序插件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了。