datatables 參數詳解

/@translator codepiano
//@blog codepiano 
//@email codepiano.li@gmail.com
//嘗試着翻譯了一下，不免有錯誤的地方，歡迎發郵件告知，多謝。
/*------------------------------------------------Feature------------------------------------------------*/
$(document).ready( function (){
  $(‘selector‘).dataTable( {
    /*
     *  默認爲true
     *  是否自動計算列寬，計算列寬會花費一些時間，若是列寬經過aoColumns傳遞，能夠關閉該屬性做爲優化
     */
    "bAutoWidth":true,
    /*
     *  默認爲false
     *  是否延遲渲染，當用Ajax或者js方式加載數據時開啓延遲渲染會帶來很大的速度提高
     *  當該屬性設置爲true時，表格每一行新增的元素只有在須要被畫出來時纔會被DataTable建立出來
     */
    "bDeferRender":false,
    /*
     * 默認爲true
     * 是否對數據進行過濾，數據過濾是十分靈活的，容許終端用戶輸入多個用空格分隔開的關鍵字
     * 匹配包含這些關鍵字的行，即便關鍵字的順序不是用戶輸入的順序，過濾操做會跨列進行匹配，關鍵字能夠分佈在一行中不一樣的列
     * 要注意的是若是你想在DataTable中使用過濾，該選項必須設置爲true，若是想移除默認過濾輸入框可是保留過濾功能，請設置爲false(API沒寫，推測是false)
     */
    "bFilter":true,
    /*
     * 默認爲true
     * 是否顯示錶格信息，是指當前頁面上顯示的數據的信息，若是有過濾操做執行，也會顯示過濾操做的信息
     */
    "bInfo":true,
    /*
     * 默認爲fasle
     * 是否開啓jQuery UI ThemeRoller支持，須要一些ThemeRoller使用的標記，這些標記有些與DataTable傳統使用的有輕微的差別，有些是額外附加的
     */
    "bJQueryUI":false,
    /*
     * 默認爲true
     * 是否容許終端用戶從一個選擇列表中選擇分頁的頁數，頁數爲10，25，50和100，須要分頁組件bPaginate的支持
     */
    "bLengthChange":false,
    /*
     * 默認爲true
     * 是否開啓分頁功能,即便設置爲false,仍然會有一個默認的<前進,後退>分頁組件
     */
    "bPaginage":true,
    /*
     * 默認爲false
     * 當表格在處理的時候（好比排序操做）是否顯示「處理中...」
     * 當表格的數據中的數據過多以致於對其中的記錄進行排序時會消耗足以被察覺的時間的時候，該選項會有些用處
     */
    "bProcessing":false,
    /*
     * 默認爲false
     * 是否開啓不限制長度的滾動條（和sScrollY屬性結合使用），不限制長度的滾動條意味着當用戶拖動滾動條的時候DataTable會不斷加載數據
     * 當數據集十分大的時候會有些用處，該選項沒法和分頁選項同時使用，分頁選項會被自動禁止，注意，額外推薦的滾動條會優先與該選項
     */
    "bScrollInfinite":false,
    /*
     * 默認爲false
     * 配置DataTable使用服務器端處理，注意，sAjaxSource參數必須指定，以便給DataTable一個爲每一行獲取數據的數據源
     */
    "bServerSide":false,
    /*
     * 默認爲true
     * 是否開啓列排序，對單獨列的設置在每一列的bSortable選項中指定
     */
    "bSort":true,
    /*
     * 默認爲true
     * 是否在當前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class，當該列被排序的時候，能夠切換其背景顏色
     * 該選項做爲一個來回切換的屬性會增長執行時間（當class被移除和添加的時候）
     * 當對大數據集進行排序的時候你或許但願關閉該選項
     */
    "bSortClasses":true,
    /*
     * 默認爲false
     * 是否開啓狀態保存，當選項開啓的時候會使用一個cookie保存表格展現的信息的狀態，例如分頁信息，展現長度，過濾和排序等
     * 這樣當終端用戶從新加載這個頁面的時候可使用之前的設置
     */
    "bStateSave":false,
    /*
     * 默認爲空字符串，即：無效
     * 是否開啓水平滾動，當一個表格過於寬以致於沒法放入一個佈局的時候，或者表格有太多列的時候，你能夠開啓該選項
     * 從而在一個可橫向滾動的視圖裏面展現表格，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）
     */
    "sScrollX":"100%",
    /*
     * 默認爲空字符串，即：無效
     * 是否開啓垂直滾動，垂直滾動會驅使DataTable設置爲給定的長度，任何溢出到當前視圖以外的數據能夠經過垂直滾動進行察看
     * 當在小範圍區域中顯示大量數據的時候，能夠在分頁和垂直滾動中選擇一種方式，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）
     */
    "sScrollY":"100%",
    /*
     * 自定義語言設置
     */
    "oLanguage":{
        "oAria":{
        /*
         * 默認值爲activate to sort column ascending
         * 當一列被按照升序排序的時候添加到表頭的ARIA標籤，注意列頭是這個字符串的前綴（？）
         */
            "sSortAscending": " - click/return to sort ascending",
        /*
         * 默認值爲activate to sort column ascending
         * 當一列被按照升序降序的時候添加到表頭的ARIA標籤，注意列頭是這個字符串的前綴（？）
         */
            "sSortDescending": " - click/return to sort descending"
        },
        "oPaginate": {
            /*
             * 默認值爲First
             * 當使用全數字類型的分頁組件的時候，到第一頁按鈕上的文字
             */
            "sFirst": "First page",
            /*
             * 默認值爲Last
             * 當使用全數字類型的分頁組件的時候，到最後一頁按鈕上的文字
             */
            "sLast": "Last page",
            /*
             * 默認值爲Next
             * 當使用全數字類型的分頁組件的時候，到下一頁按鈕上的文字
             */
            "sNext": "Next page",
            /*
             * 默認值爲Previous
             * 當使用全數字類型的分頁組件的時候，到前一頁按鈕上的文字
             */
            "sPrevious": "Previous page"
        },
        /*
         * 默認值activate to sort column ascending爲
         * 當表格中沒有數據（無視由於過濾致使的沒有數據）時，該字符串年優先與sZeroRecords顯示
         * 注意這是個可選參數，若是沒有指定，sZeroRecrods會被使用（既不是默認值也不是給定的值）
         */
        "sEmptyTable": "No data available in table",
        /*
         * 默認值爲Showing _START_ to _END_ of _TOTAL_ entries 
         * 該屬性給終端用戶提供當前頁面的展現信息，字符串中的變量會隨着表格的更新被動態替換，並且能夠被任意移動和刪除
         */
        "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)",
        /*
         * 默認值爲Showing 0 to 0 of 0 entries 
         * 當表格中沒有數據時展現的表格信息，一般狀況下格式會符合sInfo的格式
         */
        "sInfoEmpty": "No entries to show",
        /*
         * 默認值爲(filtered from _MAX_ total entries) 
         * 當用戶過濾表格中的信息的時候，該字符串會被附加到信息字符串的後面，從而給出過濾器強度的直觀概念
         */
        "sInfoFiltered": " - filtering from _MAX_ records",
        /*
         * 默認值爲空字符串
         * 使用該屬性能夠很方便的向表格信息字符串中添加額外的信息，被添加的信息在任什麼時候候都會被附加到表格信息組件的後面
         * sInfoEmpty和sInfoFiltered能夠以任何被使用的方式進行結合
         */
        "sInfoPostFix": "All records shown are derived from real information.",
        /*
         * 默認值爲‘,‘
         * DataTable有內建的格式化數字的工具，能夠用來格式化表格信息中較大的數字
         * 默認狀況下會自動調用，可使用該選項來自定義分割的字符 
         */
        "sInfoThousands": "‘",
        /*
         * 默認值爲Show _MENU_ entries 
         * 描述當分頁組件的下拉菜單的選項被改變的時候發生的動做，‘_MENU_‘變量會被替換爲默認的10，25，50，100
         * 若是須要的話能夠被自定義的下拉組件替換
         */
         "sLengthMenu": "Display _MENU_ records",
         /*
          * 默認值爲Loading...
          * 當使用Ajax數據源和表格在第一次被加載蒐集數據的時候顯示的字符串，該信息在一個空行顯示
          * 向終端用戶指明數據正在被加載，注意該參數在從服務器加載的時候無效，只有Ajax和客戶端處理的時候有效
          */
         "sLoadingRecords": "Please wait - loading...",
         /*
          * 默認值爲Processing...
          * 當表格處理用戶動做（例如排序或者相似行爲）的時候顯示的字符串
          */
         "sProcessing": "DataTables is currently busy",
         /*
          * 默認爲Search:
          * 描述用戶在輸入框輸入過濾條件時的動做，變量‘_INPUT_‘,若是用在字符串中
          * DataTable會使用用戶輸入的過濾條件替換_INPUT_爲HTML文本組件，從而能夠支配它（即用戶輸入的過濾條件）出如今信息字符串中的位置 
          * 若是變量沒有指定，用戶輸入會自動添加到字符串後面
          */
         "sSearch": "Apply filter _INPUT_ to table",
         /*
          * 默認值爲空字符串，即：無效
          * 全部語言信息能夠被存儲在服務器端的文件中，DataTable能夠根據該參數指定的URL去尋找
          * 必須保存語言文件的URL信息，必須是JSON格式，對象和初始化中使用的oLanguage對象具備相同的屬性
          * 請參考示例文件來了解該參數是如何工做的
          */
         "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt",
         /*
          * 默認值爲No matching records found
          * 當對數據進行過濾操做後，若是沒有要顯示的數據，會在表格記錄中顯示該字符串
          * sEmptyTable只在表格中沒有數據的時候顯示，忽略過濾操做
          */
         "sZeroRecords": "No records to display"
     }
   });
 });
 
 /*------------------------------------------------Options------------------------------------------------*/
 /*
  * bDestroy
  * 默認爲false
  * 使用傳遞的新的初始化對象中的屬性構造一個新的表格，並替換一個匹配指定的選擇器的表格
  * 若是沒有匹配到表格，新的表格會被做爲一個普通表格被構建
  */
 $(‘selector‘).dataTable({
      "bFilter": false,
      "bDestroy": true
  });
  
  /*
   * bRetrieve
   * 默認爲false
   * 使用指定的選擇器檢索表格，注意，若是表格已經被初始化，該參數會直接返回已經被建立的對象
   * 並不會顧及你傳遞進來的初始化參數對象的變化，將該參數設置爲true說明你確認已經明白這一點
   * 若是你須要的話，bDestroy能夠用來從新初始化表格
   */
  $(document).ready(function(){
    initTable();
    tableActions();
  });
  
  function initTable()
  {
    return $(‘#example‘).dataTable( {
      "sScrollY": "200px",
      "bPaginate": false,
      "bRetrieve": true
    });
  }
 
 function tableActions()
 {
   var oTable = initTable();
   // perform API operations with oTable 
 }
 
 /*
  * bScrollAutoCss
  * 默認爲true
  * 指明DataTable中滾動的標題元素是否被容許設置內邊距和外邊距等
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "bScrollAutoCss": false,
     "sScrollY": "200px"
   });
 });
 
 /*
  * bScrollCollapse
  * 默認爲false
  * 當垂直滾動被容許的時候，DataTable會強制表格視圖在任什麼時候候都是給定的高度（對佈局有利）
  * 不過，當把數據集過濾到十分小的時候看起來會很古怪，並且頁腳會留在最下面
  * 當結果集的高度比給定的高度小時該參數會使表格高度自適應
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sScrollY": "200",
     "bScrollCollapse": true
   });
 });
 
 /*
  * bSortCellsTop
  * 默認爲false
  * 是否容許DataTable使用頂部（默認爲true）的單元格，或者底部（默認爲false）的單元格，當使用複合表頭的時候會有些用處
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "bSortCellsTop": true
   });
 });
 
 /*
  * iCookieDuration
  * 默認爲7200秒（2個小時）
  * 設置用來存儲會話信息的cookie的持續時間，單位是秒
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "iCookieDuration": 60*60*24 // 1 day
   });
 })
 
 /*
  * iDeferLoading
  * 默認爲null
  * 當選項被開啓的時候，DataTable在非加載第一次的時候不會向服務器請求數據，而是會使用頁面上的已有數據（不會應用排序等）
  * 所以在加載的時候保留一個XmlHttpRequest，iDeferLoading被用來指明須要延遲加載，並且也用來通知DataTable一個滿的表格有多少條數據
  * 信息元素和分頁會被正確保留
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "bServerSide": true,
     "sAjaxSource": "scripts/server_processing.php",
     "iDeferLoading": 57
   });
 });
 
 /*
  * iDisplayLength
  * 默認爲10
  * 單頁顯示的數據的條數，若是bLengthChange屬性被開啓，終端用戶能夠經過一個彈出菜單重寫該數值
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "bServerSide": true,
     "sAjaxSource": "scripts/server_processing.php",
     "iDeferLoading": 57
   });
 });
 
 /*
  * iDisplayStart
  * 默認爲0
  * 當開啓分頁的時候，定義展現的記錄的起始序號，不是頁數，所以若是你每一個分頁有10條記錄並且想從第三頁開始
  * 須要把該參數指定爲20
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "iDisplayStart": 20
   });
 })
 
 /*
  * iScrollLoadGap
  * 默認爲100
  * 滾動餘界是指DataTable在當前頁面還有多少條數據可供滾動時自動加載新的數據，你可能但願指定一個足夠大的餘界
  * 以便滾動加載數據的操做對用戶來講是平滑的，同時也不會大到加載比須要的多的多的數據
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "bScrollInfinite": true,
     "bScrollCollapse": true,
     "sScrollY": "200px",
     "iScrollLoadGap": 50
   });
 });
 
 /*
  * iTabIndex
  * 默認爲0
  * 默認狀況下DataTable容許經過爲須要鍵盤導航的元素添加tabindex屬性來進行導航（排序、分頁、過濾）
  * 容許你經過tab鍵切換控制組件，使用回車鍵去激活他們，默認爲0表示按照文檔流來切換
  * 若是須要的話，你可使用該參數重寫切換順序，使用-1來禁止內建的鍵盤導航
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "iTabIndex": 1
   });
 });
 
 /*
  * oSearch
  * 無默認值
  * 該參數容許你在初始化的時候使用已經定義的全局過濾狀態，sSearch對象必須被定義，可是全部的其它選項都是可選的
  * 當bRegex爲true的時候，搜索字符串會被看成正則表達式，當爲false（默認）的時候，會被直接看成一個字符串
  * 當bSmart爲true的時候，DataTable會使用使用靈活過濾策略（匹配任何可能的數據），爲false的時候不會這樣作
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "oSearch": {"sSearch": "Initial search"}
     });
 })
 
 /*
  * sAjaxDataProp
  * 默認爲aaData
  * 當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性做爲數據源
  * 該選項容許變動數據源的名稱，你可使用JavaScript的點號對象表示法去訪問多級網狀數據源
  */
 // Get data from { "data": [...] }
 $(document).ready(function(){
   var oTable = $(‘#example‘).dataTable( {
     "sAjaxSource": "sources/data.txt",
     "sAjaxDataProp": "data"
   });
 });
 
 // Get data from { "data": { "inner": [...] } }
 $(document).ready(function(){
   var oTable = $(‘#example‘).dataTable( {
     "sAjaxSource": "sources/data.txt",
     "sAjaxDataProp": "data.inner"
   });
 });
 
 /*
  * sAjaxSource
  * 默認爲null
  * 該參數用來向DataTable指定加載的外部數據源（若是想使用現有的數據，請使用aData）
  * 能夠簡單的提供一個能夠用來得到數據url或者JSON對象，該對象必須包含aaData，做爲表格的數據源
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"
   });
 })
 
 /*
  * sCookiePrefix
  * 默認爲SpryMedia_DataTables_
  * 該參數能夠用來重寫DataTable默認指定的用來存儲狀態信息的cookie的前綴
 */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sCookiePrefix": "my_datatable_",
   });
 });
 
 /*
  * 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>‘
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sDom": ‘<"top"i>rt<"bottom"flp><"clear"&lgt;‘
   });
 });
 
 /*
  * sPaginationType
  * 默認爲two_button
  * DataTable內建了兩種交互式分頁策略，兩個按鈕和全頁數，展示給終端用戶不一樣的控制方式
  * 能夠經過API增長策略
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "sPaginationType": "full_numbers"
     });
 })
 
 /*
  * sScrollXInner
  * 默認爲空字符串，即：無效
  * 當橫向滾動可用的時候，該屬性能夠用來強制DataTable的寬度比須要的更長
  * 好比你須要表格彼此相隔適宜，該變量能夠用來使表格變大，並且強制滾動
  * 該該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "sScrollX": "100%",
         "sScrollXInner": "110%"
     });
 });
 
 /*
  * sServerMethod
  * 默認值爲GET
  * 設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bServerSide": true,
         "sAjaxSource": "scripts/post.php",
         "sServerMethod": "POST"
     });
 });
 /*------------------------------------------------Callback------------------------------------------------*/
 /*
  * fnCookieCallback
  * 無默認值
  * 當DataTable的狀態保留可用時，自定義被保存的cookie和參數。只要cookie被修改就會調用此方法
  * 該方法須要返回一個格式良好的cookie字符串，注意數據對象是以Javascript對象的形式傳遞進來的，必須轉換成字符串，例如JSON格式
  */
 $(document).ready(function (){
   $(‘#example‘).dataTable({
     "fnCookieCallback": function (sName, oData, sExpires, sPath) {
       // Customise oData or sName or whatever else here
       return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
     }
   });
 });
 
 /*
  * fnCreatedRow
  * 無默認值
  * 當一個新的TR元素（而且全部TD子元素被插入）被建立或者被做爲一個DOM資源被註冊時調用該函數
  * 容許操做該TR元素
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "fnCreatedRow": function( nRow, aData, iDataIndex ){
             // Bold the grade for all ‘A‘ grade browsers
             if ( aData[4] == "A" )
     {
         $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ );
     }
         }
     });
 });
 
 /*
  * fnDrawCallback
  * 無默認值
  * 每當draw事件發生時調用該函數，容許你動態編輯新建的dom對象的任何屬性
  */
 $(document).ready( function(){
     $(‘#example‘).dataTable({
         "fnDrawCallback": function(){
             alert( ‘DataTables has redrawn the table‘ );
         }
     });
 });
 
 /*
  * fnFooterCallback
  * 無默認值
  * 與fnHeaderCallback()徹底相同，只是該函數容許你在每個draw時間發生時修改頁腳
  */
 $(document).ready( function(){
     $(‘#example‘).dataTable({
         "fnDrawCallback": function() {
             alert( ‘DataTables has redrawn the table‘ );
         }
     });
 });
 
 /*
  * fnFormatNumber
  * 無默認值
  * 當渲染表格信息（例如：顯示57條記錄中的1-10條）中大的數字時
  * 爲了方便用戶，DataTable會使用逗號分割每千單位（例如1000000會被渲染爲1,000,000）
  * 該函數會重寫DataTable默認使用的策略
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable({
     "fnFormatNumber": function ( iIn ) {
       if ( iIn < 1000 ) {
         return iIn;
       } else {
         var
           s=(iIn+""),
           a=s.split(""), out="",
           iLen=s.length;
 
         for ( var i=0 ; i<iLen ; i++ ) {
           if ( i%3 === 0 && i !== 0 ) {
             out = "‘"+out;
           }
           out = a[iLen-i-1]+out;
         }
       }
       return out;
     };
   });
 });
 
 /*
  * fnHeaderCallback
  * 無默認值
  * 每當draw事件發生時調用該函數，容許你動態編輯表頭行，能夠用來計算和展現關於表格的有用的信息
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "fnFormatNumber": function ( iIn ) {
             if ( iIn < 1000 ) {
                 return iIn;
             } else {
                 var
         s=(iIn+""),
         a=s.split(""), out="",
         iLen=s.length;
 
     for ( var i=0 ; i<iLen ; i++ ) {
         if ( i%3 === 0 && i !== 0 ) {
             out = "‘"+out;
         }
         out = a[iLen-i-1]+out;
     }
             }
             return out;
         };
     });
 });
 
 /*
  * fnInfoCallback
  * 無默認值
  * 信息元素能夠用來傳輸表格當前狀態的信息，儘管DataTable提供的國際化的選項在處理大多數自定義狀況時已經至關方便了
  * 或許你有時仍然但願自定義深層的字符串,該函數會知足你的須要
  */
 $(‘#example‘).dataTable( {
     "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
         return iStart +" to "+ iEnd;
     }
 });
 
 /*
  * fnInitComplete
  * 無默認值
  * 當表格被初始化後調用該函數，一般DataTable會被持續初始化，並不須要該函數
  * 但是，當使用異步的XmlHttpRequest從外部得到語言信息時，初始化並非持續的
  */
 $(document).ready( function(){
     $(‘#example‘).dataTable({
         "fnInitComplete": function(oSettings, json) {
             alert( ‘DataTables has finished its initialisation.‘ );
         }
     });
 })
 
 /*
  * fnPreDrawCallback
  * 無默認值
  * 在每個表格draw事件發生前調用該函數，經過返回false來取消draw事件
  * 其它任何的返回值，包括undefined都會致使draw事件的發生
  */
 $(document).ready( function(){
     $(‘#example‘).dataTable({
         "fnPreDrawCallback": function( oSettings ) {
             if ( $(‘#test‘).val() == 1 ) {
                 return false;
             }
         }
     });
 });
 
 /*
  * fnRowCallback
  * 無默認值
  * 你能夠經過該函數在每個表格繪製事件發生以後，渲染到屏幕上以前，向表格裏的每一行傳遞‘處理過程‘
  * 該函數能夠用來設置行的class名字等
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
             // Bold the grade for all ‘A‘ grade browsers
             if ( aData[4] == "A" )
     {
         $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ );
     }
         }
     });
 });
 
 /*
  * fnServerData
  * 無默認值
  * 你可使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用
  * 例如你可使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據
  */
 // POST data to server
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "xhr.php",
         "fnServerData": function ( sSource, aoData, fnCallback ) {
             $.ajax( {
                 "dataType": ‘json‘,
             "type": "POST",
             "url": sSource,
             "data": aoData,
             "success": fnCallback
             } );
         }
     });
 });
 
 /*
  * fnServerParams
  * 無默認值
  * 用來在向服務器發送Ajax請求時發送額外的數據，例如自定義的過濾信息，該函數使向服務器發送額外參數變得簡單
  * 傳遞進來的參數是DataTable創建的數據集合，你能夠根據須要添加或者修改該集合
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "scripts/server_processing.php",
         "fnServerParams": function ( aoData ) {
             aoData.push( { "name": "more_data", "value": "my_value" } );
         }
     });
 });
 
 /*
  * fnStateLoad
  * 無默認值
  * 加載表格狀態，使用該函數你能夠定義狀態信息加載的位置和方式，默認狀況下DataTable會從cookie中加載
  * 不過你或許但願使用本地存儲（HTML5支持），或者服務端數據庫
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bStateSave": true,
         "fnStateSave": function (oSettings, oData) {
             var o;
 
             // Send an Ajax request to the server to get the data. Note that
             // this is a synchronous request.
             $.ajax( {
                 "url": "/state_load",
                 "async": false,
                 "dataType": "json",
                 "success": function (json) {
                     o = json;
                 }
             } );
             return o;
         }
     });
 });
 
 /*
  * fnStateLoadParams
  * 無默認值
  * 該回調能夠用來在加載狀態信息以前編輯狀態信息
  * 函數在表格從存儲的數據加載狀態信息時調用，在表格<當前使用的設置對象>被<從保存信息中加載的設置對象>修改之前調用
  * 注意做爲插件開發者，你應該使用‘stateLoadParams‘事件去加載plug-in的參數
  */
 // Remove a saved filter, so filtering is never loaded
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bStateSave": true,
         "fnStateLoadParams": function (oSettings, oData) {
             oData.oFilter.sSearch = "";
         });
     });
 
 
 // Disallow state loading by returning false
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bStateSave": true,
         "fnStateLoadParams": function (oSettings, oData) {
             return false;
         });
     });
 
 /*
  * fnStateLoaded
  * 無默認值
  * 在表格狀態被狀態存儲方法讀取和DataTable設置對象被修改時調用，做爲被狀態信息被加載的結果
  */
 // Show an alert with the filtering value that was saved
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bStateSave": true,
         "fnStateLoaded": function (oSettings, oData) {
             alert( ‘Saved filter was: ‘+oData.oFilter.sSearch );
         });
     });
 
 /*
  * fnStateSave
  * 無默認值
  * 保存表格狀態，使用該函數你能夠定義狀態信息保存的位置和方式，默認狀況下DataTable會保存在cookie中
  * 不過你或許但願使用本地存儲（HTML5支持），或者服務端數據庫
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bStateSave": true,
         "fnStateSave": function (oSettings, oData) {
             // Send an Ajax request to the server with the state object
             $.ajax( {
                 "url": "/state_save",
             "data": oData,
             "dataType": "json",
             "method": "POST"
                 "success": function () {}
             });
         }
     });
 });
 
 /*
  * fnStateSaveParams
  * 無默認值
  * 該回調容許你編輯被保存的狀態信息，在表格改變了狀態信息須要保存的時候調用
  * 可使用該回調在保存狀態信息的對象被保存之前對其進行修改，包括添加或者其它狀態屬性或者修改
  */
 // Remove a saved filter, so filtering is never saved
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bStateSave": true,
         "fnStateLoadParams": function (oSettings, oData) {
             oData.oFilter.sSearch = "";
         });
     });
 /*------------------------------------------------Columns------------------------------------------------*/
 /*
  * aDataSort
  * 默認爲null,自動使用列序號做爲默認
  * 在排序一列的時候同時將其它幾列也排序，例如名和姓做爲多列排序
  */
 // Using aoColumnDefs
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "aoColumnDefs": [
     { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
         { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
         { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
     ]
     });
 });
 
 
 // Using aoColumns
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "aoColumns": [
     { "aDataSort": [ 0, 1 ] },
         { "aDataSort": [ 1, 0 ] },
         { "aDataSort": [ 2, 3, 4 ] },
         null,
         null
         ]
     });
 });
 
 /*
  * asSorting
  * 默認爲[ ‘asc‘, ‘desc‘ ] 
  * 你能夠經過該參數控制默認排序的方向，甚至改變排序處理器的行爲（例如：只容許升序排序）
  */
 // Using aoColumnDefs
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "aoColumnDefs": [
     { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
         { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
         { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
     ]
     });
 });
 
 
 // Using aoColumns
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "aoColumns": [
         null,
         { "asSorting": [ "asc" ] },
         { "asSorting": [ "desc", "asc", "asc" ] },
         { "asSorting": [ "desc" ] },
         null
         ]
     });
 });
 
 /*
  * bSearchable
  * 默認爲true
  * 是否在列上應用過濾
  */
 // Using aoColumnDefs
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "aoColumnDefs": [
     { "bSearchable": false, "aTargets": [ 0 ] }
     ]} );
 });
 
 
 // Using aoColumns
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "aoColumns": [
     { "bSearchable": false },
         null,
         null,
         null,
         null
         ] });
 });
 
 /*
  * bSortable
  * 默認爲true
  * 是否在某一列上開啓排序
  */
 // Using aoColumnDefs
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "aoColumnDefs": [
     { "bSortable": false, "aTargets": [ 0 ] }
     ] });
 });
 
 
 // Using aoColumns
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "bSortable": false },
         null,
         null,
         null,
         null
         ] });
 });
 
 /*
  * bUseRendered
  * 默認爲true
  * 當對一列使用使用fnRender時，你或許但願使用原始的數據（渲染之前）去排序或者過濾（默認是使用用戶看到的渲染過的數據）
  * 或許對日期類型有些用處，注意，如今建議使用mDataProp做爲函數而且使用該函數提供的type參數，來容許不一樣的數據被用來排序，過濾，展示和類型檢測
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     {
         "fnRender": function ( oObj ) {
             return oObj.aData[0] +‘ ‘+ oObj.aData[3];
         },
         "bUseRendered": false,
         "aTargets": [ 0 ]
     }
     ]
     } );
 } );
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     {
         "fnRender": function ( oObj ) {
             return oObj.aData[0] +‘ ‘+ oObj.aData[3];
         },
         "bUseRendered": false
     },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 
 /*
  * bVisible
  * 默認值爲true
  * 是否展現某一列
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "bVisible": false, "aTargets": [ 0 ] }
     ] } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "bVisible": false },
         null,
         null,
         null,
         null
         ] } );
 } );
 
 /*
  * fnCreatedCell
  * 無默認值
  * 每當新的單元格被創建（Ajax源等）或者處理輸入（DOM源）時，開發者可定義的函數會被調用
  * 該屬性用做fnRender的補充來容許你修改在fnRender函數調用以後新建的DOM元素（例如增長背景顏色）
  */
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [ {
             "aTargets": [3],
         "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
             if ( sData == "1.7" ) {
                 $(nTd).css(‘color‘, ‘blue‘)
             }
         }
         } ]
     });
 } );
 
 /*
  * fnRender
  * 無默認值
  * 自定義列中每一個單元格被展現的時候調用的展現函數
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     {
         "fnRender": function ( o, val ) {
             return o.aData[0] +‘ ‘+ o.aData[3];
         },
         "aTargets": [ 0 ]
     }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "fnRender": function ( o, val ) {
                                           return o.aData[0] +‘ ‘+ o.aData[3];
                                       } },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 
 /*
  * iDataSort
  * 默認值爲-1，使用自動計算的列標
  * 當選擇該列進行排序的時候，你但願調用排序操做的列的列號，該參數能夠用來按隱藏列排序
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "iDataSort": 1, "aTargets": [ 0 ] }
     ]
     } );
 } );
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "iDataSort": 1 },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 
 /*
  * mDataProp
  * 默認爲null,使用自動計算的列標
  * 該屬性能夠從任何JSON格式數據源讀取屬性，包括深層網狀的對象和屬性，
  * 有幾種不一樣的傳遞方式能夠影響mDataProp的行爲
  * 整型：被看成數據源的數組下表，是DataTable使用的默認行爲（每列遞增）
  * 字符串類型：被看成從數據源獲取的對象的屬性名，注意你可使用Javascript點號訪問符去訪問深層次的屬性或數組
  * null：sDafaultContent選項會被使用到單元格上，（默認是空字符串，當生成可編輯列、可刪除列的時候可使用該屬性）
  * 函數：當表格獲取或者設置單元格時被調用的函數，函數有三個參數
  *      {array|object}:該行的數據源
  *      {string}:調用數據請求的類型，設置數據時是‘set‘，收集數據時是‘filter‘,‘display‘,‘type‘,‘sort‘
  *      {*}:當第二個參數是set的時候，要被設置的數據
  *      當類型是‘set‘的時候，該函數不須要返回一個值，除此以外，返回值是能夠用來請求數據的
  */
 // Read table data from objects
 $(document).ready(function() {
     var oTable = $(‘#example‘).dataTable( {
         "sAjaxSource": "sources/deep.txt",
         "aoColumns": [
     { "mDataProp": "engine" },
         { "mDataProp": "browser" },
         { "mDataProp": "platform.inner" },
         { "mDataProp": "platform.details.0" },
         { "mDataProp": "platform.details.1" }
     ]
     } );
 } );
 
 
 // Using mDataProp as a function to provide different information for
 // sorting, filtering and display. In this case, currency (price)
 $(document).ready(function() {
     var oTable = $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     {
         "aTargets": [ 0 ],
         "mDataProp": function ( source, type, val ) {
             if (type === ‘set‘) {
                 source.price = val;
                 // Store the computed dislay and filter values for efficiency
                 source.price_display = val=="" ? "" : "$"+numberFormat(val);
                 source.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;
                 return;
             }
             else if (type === ‘display‘) {
                 return source.price_display;
             }
             else if (type === ‘filter‘) {
                 return source.price_filter;
             }
     // ‘sort‘ and ‘type‘ both just use the integer
     return source.price;
         }
     ]
     } );
     } );
 
 /*
  * sClass
  * 默認值爲空字符串
  * 該列的每個單元格被賦予的class
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "sClass": "my_class", "aTargets": [ 0 ] }
     ]
     } );
 } );
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "sClass": "my_class" },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 
 /*
  * sContentPadding
  * 默認值爲空字符串
  * 當DataTable計算分配給每一列的列寬的時候，會尋找每一列中最長的字符串，而後構建一個臨時表
  * 從臨時表中讀取寬度，這樣帶來的問題是‘mmm‘會比‘iiii‘的長度長不少，可是後者的長度要大
  * 這樣計算值會出現誤差（正確的處理而後放入DOM對象再測量長度會至關的慢），咱們提供了這個選項做爲一個解決方法
  * 它會把他的值添加到該列最長的值的後面來計算列寬，一般你不須要該屬性，該屬性也沒有被寫到DataTables.net的文檔中
  */
 // Using aoColumns
 $(document).ready(function() {
   $(‘#example‘).dataTable( {
     "aoColumns": [
       null,
       null,
       null,
       {
         "sContentPadding": "mmm"
       }
     ]
   } );
 } );
 
 /*
  * sDefaultContent
  * 默認爲空字符串
  * 容許給列值一個默認值，只要發現null值就會顯示默認值
  * 能夠由mDataProp設置爲null或者數據源是null引發
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     {
         "mDataProp": null,
         "sDefaultContent": "Edit",
         "aTargets": [ -1 ]
     }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
         null,
         null,
         null,
         {
             "mDataProp": null,
         "sDefaultContent": "Edit"
         }
     ]
     } );
 } );
 
 /*
  * sName
  * 默認值爲空字符串
  * 該參數只有使用在服務器端處理的時候調用，在瞭解客戶端展現了哪些列的時候十分有用
  * 而後與數據庫字段創建映射，當被定義時，若是服務器端返回的信息的順序不是指望的順序，也可使用名字去區分
  * 使用這種方式的好處是：用戶在客戶端交換了列，你的服務器端代碼不用更新
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "sName": "engine", "aTargets": [ 0 ] },
         { "sName": "browser", "aTargets": [ 1 ] },
         { "sName": "platform", "aTargets": [ 2 ] },
         { "sName": "version", "aTargets": [ 3 ] },
         { "sName": "grade", "aTargets": [ 4 ] }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "sName": "engine" },
         { "sName": "browser" },
         { "sName": "platform" },
         { "sName": "version" },
         { "sName": "grade" }
     ]
     } );
 } );
 
 /*
  * sSortDataType
  * 默認值爲std
  * 爲排序操做定義能夠用來在排序前讀取實時表格信息（更新內部緩存版本）的數據源的類型
  * 容許排序事件發生在用戶可編輯的元素上，例如輸入框
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
         { "sType": "numeric", "aTargets": [ 3 ] },
         { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
         { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
         null,
         null,
         { "sSortDataType": "dom-text" },
         { "sSortDataType": "dom-text", "sType": "numeric" },
         { "sSortDataType": "dom-select" },
         { "sSortDataType": "dom-checkbox" }
     ]
     } );
 } );
 
 /*
  * sTitle
  * 默認值爲null,從TH標籤讀取
  * 列名
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "sTitle": "My column title", "aTargets": [ 0 ] }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "sTitle": "My column title" },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 
 /*
  * sType
  * 默認值爲null,從弱引用數據中自動判斷
  * 容許你指定該列數據按什麼類型來排序，目前有四種類型（字符串，數字，日期和html（在排序前會自動除去HTML標記））可選
  * 注意只有可以被Javascript的Date對象接受的格式化日期字符串纔會被看成日期類型接受，例如"Mar 26, 2008 5:03 PM"
  * 默認是使用html類型，更多類型能夠經過插件添加
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "sType": "html", "aTargets": [ 0 ] }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "sType": "html" },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 
 /*
  * sWidth
  * 默認值爲null,自動的
  * 定義列的寬度，該參數能夠接受CSS定義（3em,20px等），DataTable對沒有經過該接口指定寬度的列使用靈活寬度
  * 從而保證表格是可被讀的
  */
 // Using aoColumnDefs
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumnDefs": [
     { "sWidth": "20%", "aTargets": [ 0 ] }
     ]
     } );
 } );
 
 
 // Using aoColumns
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "aoColumns": [
     { "sWidth": "20%" },
         null,
         null,
         null,
         null
         ]
     } );
 } );
 /*------------------------------------------------ServerSide------------------------------------------------*/
 /*
  * bServerSide
  * 默認值false
  * 配置使用服務器端處理的DataTable，注意sAjaxSource參數必須指定，以便給DataTable一個獲取每行數據的數據源
  */
 $(document).ready( function () {
     $(‘#example‘).dataTable( {
         "bServerSide": true,
         "sAjaxSource": "xhr.php"
     } );
 } );
 /*
  * fnServerData
  * 無默認值
  * 你可使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用
  * 例如你可使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據
  */
 // POST data to server
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "xhr.php",
         "fnServerData": function ( sSource, aoData, fnCallback ) {
             $.ajax( {
                 "dataType": ‘json‘,
             "type": "POST",
             "url": sSource,
             "data": aoData,
             "success": fnCallback
             } );
         }
     } );
 } );
 /*
  * fnServerParams
  * 無默認值
  * 用來在向服務器發送Ajax請求時發送額外的數據，例如自定義的過濾信息，該函數使向服務器發送額外參數變得簡單
  * 傳遞進來的參數是DataTable創建的數據集合，你能夠根據須要添加或者修改該集合
  */
 $(document).ready(function() {
     $(‘#example‘).dataTable( {
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "scripts/server_processing.php",
         "fnServerParams": function ( aoData ) {
             aoData.push( { "name": "more_data", "value": "my_value" } );
         }
     } );
 } );
 /*
  * sAjaxDataProp
  * 默認爲aaData
  * 當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性做爲數據源
  * 該選項容許變動數據源的名稱，你可使用JavaScript的點號對象表示法去訪問多級網狀數據源
  */
 // Get data from { "data": [...] }
 $(document).ready(function() {
     var oTable = $(‘#example‘).dataTable( {
         "sAjaxSource": "sources/data.txt",
         "sAjaxDataProp": "data"
     } );
 } );
 
 
 // Get data from { "data": { "inner": [...] } }
 $(document).ready(function() {
     var oTable = $(‘#example‘).dataTable( {
         "sAjaxSource": "sources/data.txt",
         "sAjaxDataProp": "data.inner"
     } );
 } );
 /*
  * sAjaxSource
  * 默認爲null
  * 該參數用來向DataTable指定加載的外部數據源（若是想使用現有的數據，請使用aData）
  * 能夠簡單的提供一個能夠用來得到數據url或者JSON對象，該對象必須包含aaData，做爲表格的數據源
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"
   });
 })
 /*
  * sServerMethod
  * 默認值爲GET
  * 設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable({
         "bServerSide": true,
         "sAjaxSource": "scripts/post.php",
         "sServerMethod": "POST"
     });
 });