標籤：

//@translator codepiano
//@blog codepiano 
//@email [email protected]
//嘗試著翻譯了一下，難免有錯誤的地方，歡迎發郵件告知，多謝。
/*------------------------------------------------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"
     });
 });

標籤：

原文地址：http://www.cnblogs.com/hubing/p/4491308.html