目前做的專案用到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){
        //成功返回結果後的處理
         }
     });
}

}

以上配置即可顯示成帶分頁的表格哦。