目前做的項目用到datatables這個插件，總結下來：
一、引用的文件
dataTables.bootstrap.css
dataTables.bootstrap.js
！！可以到本人的資源庫中免費下載
二、html結構
因爲使用了bootstrap，class="table table-striped table-bordered“爲bootstrap樣式
<table id="tenantList" class="table table-striped table-bordered table-hover table-tr"" style="overflow: visible;">
<thead class="table_tit">
<tr>
<th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#example1.checkboxes" /></th>
<th>租戶名稱</th>
<th>狀態</th>
<th>聯繫人</th>
<th>服務目錄</th>
<th>價格係數</th>
<th>到期時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
注意！必須要有id的值哦，後面的table初始化會根據這個id的值找到table，並將數據加載到<tbody></tbody>中
三、dataTables參數解析
1、初始化：$("#tenantList").DataTable(this.config);
2、this.config = {
/*
* 默認爲false
* 當表格在處理的時候（比如排序操作）是否顯示“處理中...”
* 當表格的數據中的數據過多以至於對其中的記錄進行排序時會消耗足以被察覺的時間的時候，該選項會有些用處
*/
"bProcessing":true,
/*
* 默認爲false
* 配置DataTable使用服務器端處理，注意，sAjaxSource參數必須指定，以便給DataTable一個爲每一行獲取數據的數據源
*/
"bServerSide":true,
/*
* 默認爲true
* 是否允許終端用戶從一個選擇列表中選擇分頁的頁數，頁數爲10，25，50和100，需要分頁組件bPaginate的支持
*/
"bLengthChange":true,
/*
* 默認爲true
* 是否對數據進行過濾，數據過濾是十分靈活的，允許終端用戶輸入多個用空格分隔開的關鍵字
* 匹配包含這些關鍵字的行，即使關鍵字的順序不是用戶輸入的順序，過濾操作會跨列進行匹配，關鍵字可以分佈在一行中不同的列
* 要注意的是如果你想在DataTable中使用過濾，該選項必須設置爲true，如果想移除默認過濾輸入框但是保留過濾功能，請設置爲false(API沒寫，推測是false)
*/
"bFilter":true,
/*
* 自定義語言設置
*/
"oLanguage":{
/*
* 默認值爲Show _MENU_ entries
* 描述當分頁組件的下拉菜單的選項被改變的時候發生的動作，'_MENU_'變量會被替換爲默認的10，25，50，100
* 如果需要的話可以被自定義的下拉組件替換
*/
"sLengthMenu": "每頁顯示 _MENU_ 條",
/*
* 默認值activate to sort column ascending爲
* 當表格中沒有數據（無視因爲過濾導致的沒有數據）時，該字符串年優先與sZeroRecords顯示
* 注意這是個可選參數，如果沒有指定，sZeroRecrods會被使用（既不是默認值也不是給定的值）
*/
"sEmptyTable": "暫時沒有任何數據記錄",
/*
* 默認值爲Processing...
* 當表格處理用戶動作（例如排序或者類似行爲）的時候顯示的字符串
*/
"sProcessing": "正在載入數據...",
/*
* 默認爲Search:
* 描述用戶在輸入框輸入過濾條件時的動作，變量'_INPUT_',如果用在字符串中
* DataTable會使用用戶輸入的過濾條件替換_INPUT_爲HTML文本組件，從而可以支配它（即用戶輸入的過濾條件）出現在信息字符串中的位置
* 如果變量沒有指定，用戶輸入會自動添加到字符串後面
*/
"sSearch": "搜索 _INPUT_",
/*
* 默認值爲Showing _START_ to _END_ of _TOTAL_ entries
* 該屬性給終端用戶提供當前頁面的展示信息，字符串中的變量會隨着表格的更新被動態替換，而且可以被任意移動和刪除
*/
"sInfo": "( 共 _TOTAL_ 條 )",
/*
* 默認值爲No matching records found
* 當對數據進行過濾操作後，如果沒有要顯示的數據，會在表格記錄中顯示該字符串
* sEmptyTable只在表格中沒有數據的時候顯示，忽略過濾操作
*/
"sZeroRecords": "暫時沒有任何數據記錄",
/*
* 默認值爲Showing 0 to 0 of 0 entries
* 當表格中沒有數據時展示的表格信息，通常情況下格式會符合sInfo的格式
*/
"sInfoEmpty": "No entries to show",
},
/*
* sDom
* 默認值爲lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)
* 該初始化屬性用來指定你想把各種控制組件注入到dom節點的位置（比如你想把分頁組件放到表格的頂部）
* DIV元素（帶或者不帶自定的class）可以添加目標樣式，下列語法被使用
* 可供使用的選項
* 'l' - 長度改變
* 'f' - 過濾輸入
* 't' - 表格
* 'i' - 信息
* 'p' - 分頁
* 'r' - 處理
* 可供使用的常量
* 'H' - jQueryUI theme "header" classes('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
* 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
* 需要的語法
* '<' 和 '>' - div元素
* '<"class" and '>' - 帶有class屬性的div元素
* '<"#id" and '>' - 帶有id屬性的div元素
* 例子
* '<"wrapper"flipt>'
* '<lf<t>ip>'
*/
sDom:"<'row'r><'table-scrollable't><'row'<'col-md-3 col-sm-12'li><'col-md-2 col-sm-12 table-bottom-bar'><'col-md-7 col-sm-12'p>>",
/*
* sAjaxSource
* 默認爲null
* 該參數用來向DataTable指定加載的外部數據源（如果想使用現有的數據，請使用aData）
* 可以簡單的提供一個可以用來獲得數據url或者JSON對象，該對象必須包含aaData，作爲表格的數據源
*/
sAjaxSource : "tenant.html",
/*
*dataTables每一行數據
*/
aoColumns : [
{
"bSortable" : false, //是否在某一列上開啓排序，默認true
/*
* mData
* 默認爲null,使用自動計算的列標
* 該屬性可以從任何JSON格式數據源讀取屬性，包括深層網狀的對象和屬性，
* 有幾種不同的傳遞方式可以影響mData的行爲
* 整型：被當作數據源的數組下表，是DataTable使用的默認行爲（每列遞增）
* 字符串類型：被當作從數據源獲取的對象的屬性名，注意你可以使用Javascript點號訪問符去訪問深層次的屬性或數組
* null：sDafaultContent選項會被使用到單元格上，（默認是空字符串，當生成可編輯列、可刪除列的時候可以使用該屬性）
* 函數：當表格獲取或者設置單元格時被調用的函數，函數有三個參數
* {array|object}:該行的數據源
* {string}:調用數據請求的類型，設置數據時是'set'，收集數據時是'filter','display','type','sort'
* {*}:當第二個參數是set的時候，要被設置的數據
* 當類型是'set'的時候，該函數不需要返回一個值，除此之外，返回值是可以用來請求數據的
*/
"mData": "tenantid",
'sClass':'center', //默認值爲空字符串,該列的每一個單元格被賦予的class
/*
* 無默認值
* 自定義列中每個單元格被展示的時候調用的展示函數
*/
"mRender" : function(value,method,row){
return '<input type="checkbox" class="checkboxes" value='+value+' />';
}
}
],
/*
*默認爲[ 'asc', 'desc' ]
* 你可以通過該參數控制默認排序的方向，甚至改變排序處理器的行爲（例如：只允許升序排序）
*/
aaSorting : [1,'desc'],
/*
* fnServerData
* 無默認值
* 你可以使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用
* 例如你可以使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據
*/
fnServerData : function(sSource, aoData, fnCallback) {
//獲取查詢條件並與aoData合併
var query=[];
$(".scr_result .sr_one").each(function(){
var name=$(this).attr("name");
var value=$(this).attr("value");
query = $.merge([{'fieldName': name,'fieldValue' : value}],query);
});
aoData=$.merge([{'name': 'query','value' : JSON.stringify(query)}],aoData);
$.ajax({
url : sSource,//這個就是請求地址對應sAjaxSource
data : aoData,//這個是把datatable的一些基本數據傳給後臺,比如起始位置,每頁顯示的行數
type : 'post',
dataType : 'json',
async : false,
success :function(result){
//成功返回結果後的處理
}
});
}
}
以上配置即可顯示成帶分頁的表格哦。
