一款比較強大的jquery表格插件Datatables

Datatables是一款jquery表格插件。它是一個高度靈活的工具，能夠將任何HTML表格添加高級的交互功能。

連接：http://www.datatables.club/

本人無聊時發現的一款用來顯示數據的一款插件，很方便好用，能夠控制顯示條數，能夠根據顯示數據進行任意條件的查詢，能夠控制列進行排序，能夠控制分頁(注意這裏的分頁我認爲是一個假分頁，它須要將全部數據查詢到之後再進行分頁，數據量較大請酌情使用！)。具體的功能再也不一一敘述，直接看如何使用吧！

使用方法：

1、先引用須要用到的js和css，具體能夠在Datatables官網進行下載。

2、在頁面繪製一個表格(下方代碼僅供參考！)

<table class="table table-striped table-bordered table-hover" id="sample-table">
<thead>
<tr id="tr1">
<th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
<th width="100px">產品編號</th>
<th width="160px">產品名稱</th>
<th width="120px">產品單價(&yen;)</th>
<th width="80px">產地</th>
<th width="80px">產品數量</th>
<th width="80px">產品尺寸</th>
<th width="140px">加入時間</th>
<th width="180px">內容摘要</th>
<th width="140px">操做</th>
</tr>
</thead>
<tbody id="body"></tbody>
</table>

3、jQuery控制表格初始化

jQuery(function ($) {

oTable1 = $('#sample-table').dataTable({
"aaSorting": [[1, "desc"]],//默認第幾個排序索引從0開始
"bAutoWidth": false,//這裏是關閉了自動改變寬度
"bStateSave": true,//狀態保存

//我這裏是經過ajax向後臺調取數據
ajax: {
url: "",//路徑
dataSrc: function (json) {

//這裏我返回的是json對象
var data = JSON.parse(json);
return data;
},
dataType: 'json',
type: "get",
},

//這裏設置每行顯示的數據，就是和實體的屬性一致，若是沒有數據則爲null
"columns": [
{ "data": null },
{ "data": "SerialNumber" },
{ "data": "TradeName" },
{ "data": "Price" },
{ "data": "Place" },
{ "data": "Number" },
{ "data": "Size" },
{ "data": function (obj) { return obj.JoinTime.replace("T", " "); } },//這是我顯示時間時去除自動生成的T
{ "data": "Synopsis" },
{ "data": null }
],

//此屬性時設置行內顯示除數據之外，如按鈕，複選框
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [0, 2, 4, 5, 6, 8, 9] },// 制定列不參與排序z
{
"targets": 0,
"mRender": function (data, type, row) {
return '<label><input type="checkbox" name="ck" class="ace" value="' + row.ID + '"><span class="lbl"></span></label>';
}
},
{
"targets": 9,
"mRender": function (data, type, row) {
return '<a title="編輯" onclick="member_edit(\'編輯\',\'/Home/member_add\',' + row.ID + ',\'1000\',\'560\')" href="javascript:;" class="btn btn-xs btn-info"><i class="icon-edit bigger-120"></i></a><a title="刪除" href="javascript:;" onclick="member_del(' + row.ID + ')" class="btn btn-xs btn-warning"><i class="icon-trash bigger-120"></i></a>';
}
}
],
});
}

如上三個步驟寫完後就能夠顯示你想要顯示的數據了，如感受此文幫助到您了，求點個贊，如以爲哪裏有問題，歡迎留言一塊兒探討！