datatables參數配置詳解

時間  2019-11-21
標籤 datatables 參數 配置 詳解 简体版
原文   原文鏈接
  1. //@translator codepiano    
  2. //@blog codepiano     
  3. //@email codepiano.li@gmail.com    
  4. //嘗試着翻譯了一下，不免有錯誤的地方，歡迎發郵件告知，多謝。    
  5. /*------------------------------------------------Feature------------------------------------------------*/    
  6. $(document).ready( function (){    
  7.   $(‘selector‘).dataTable( {    
  8.     /*  
  9.      *  默認爲true  
  10.      *  是否自動計算列寬，計算列寬會花費一些時間，若是列寬經過aoColumns傳遞，能夠關閉該屬性做爲優化  
  11.      */    
  12.     "bAutoWidth":true,    
  13.     /*  
  14.      *  默認爲false  
  15.      *  是否延遲渲染，當用Ajax或者js方式加載數據時開啓延遲渲染會帶來很大的速度提高  
  16.      *  當該屬性設置爲true時，表格每一行新增的元素只有在須要被畫出來時纔會被DataTable建立出來  
  17.      */    
  18.     "bDeferRender":false,    
  19.     /*  
  20.      * 默認爲true  
  21.      * 是否對數據進行過濾，數據過濾是十分靈活的，容許終端用戶輸入多個用空格分隔開的關鍵字  
  22.      * 匹配包含這些關鍵字的行，即便關鍵字的順序不是用戶輸入的順序，過濾操做會跨列進行匹配，關鍵字能夠分佈在一行中不一樣的列  
  23.      * 要注意的是若是你想在DataTable中使用過濾，該選項必須設置爲true，若是想移除默認過濾輸入框可是保留過濾功能，請設置爲false(API沒寫，推測是false)  
  24.      */    
  25.     "bFilter":true,    
  26.     /*  
  27.      * 默認爲true  
  28.      * 是否顯示錶格信息，是指當前頁面上顯示的數據的信息，若是有過濾操做執行，也會顯示過濾操做的信息  
  29.      */    
  30.     "bInfo":true,    
  31.     /*  
  32.      * 默認爲fasle  
  33.      * 是否開啓jQuery UI ThemeRoller支持，須要一些ThemeRoller使用的標記，這些標記有些與DataTable傳統使用的有輕微的差別，有些是額外附加的  
  34.      */    
  35.     "bJQueryUI":false,    
  36.     /*  
  37.      * 默認爲true  
  38.      * 是否容許終端用戶從一個選擇列表中選擇分頁的頁數，頁數爲10，25，50和100，須要分頁組件bPaginate的支持  
  39.      */    
  40.     "bLengthChange":false,    
  41.     /*  
  42.      * 默認爲true  
  43.      * 是否開啓分頁功能,即便設置爲false,仍然會有一個默認的<前進,後退>分頁組件  
  44.      */    
  45.     "bPaginage":true,    
  46.     /*  
  47.      * 默認爲false  
  48.      * 當表格在處理的時候（好比排序操做）是否顯示「處理中...」  
  49.      * 當表格的數據中的數據過多以致於對其中的記錄進行排序時會消耗足以被察覺的時間的時候，該選項會有些用處  
  50.      */    
  51.     "bProcessing":false,    
  52.     /*  
  53.      * 默認爲false  
  54.      * 是否開啓不限制長度的滾動條（和sScrollY屬性結合使用），不限制長度的滾動條意味着當用戶拖動滾動條的時候DataTable會不斷加載數據  
  55.      * 當數據集十分大的時候會有些用處，該選項沒法和分頁選項同時使用，分頁選項會被自動禁止，注意，額外推薦的滾動條會優先與該選項  
  56.      */    
  57.     "bScrollInfinite":false,    
  58.     /*  
  59.      * 默認爲false  
  60.      * 配置DataTable使用服務器端處理，注意，sAjaxSource參數必須指定，以便給DataTable一個爲每一行獲取數據的數據源  
  61.      */    
  62.     "bServerSide":false,    
  63.     /*  
  64.      * 默認爲true  
  65.      * 是否開啓列排序，對單獨列的設置在每一列的bSortable選項中指定  
  66.      */    
  67.     "bSort":true,    
  68.     /*  
  69.      * 默認爲true  
  70.      * 是否在當前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class，當該列被排序的時候，能夠切換其背景顏色  
  71.      * 該選項做爲一個來回切換的屬性會增長執行時間（當class被移除和添加的時候）  
  72.      * 當對大數據集進行排序的時候你或許但願關閉該選項  
  73.      */    
  74.     "bSortClasses":true,    
  75.     /*  
  76.      * 默認爲false  
  77.      * 是否開啓狀態保存，當選項開啓的時候會使用一個cookie保存表格展現的信息的狀態，例如分頁信息，展現長度，過濾和排序等  
  78.      * 這樣當終端用戶從新加載這個頁面的時候可使用之前的設置  
  79.      */    
  80.     "bStateSave":false,    
  81.     /*  
  82.      * 默認爲空字符串，即：無效  
  83.      * 是否開啓水平滾動，當一個表格過於寬以致於沒法放入一個佈局的時候，或者表格有太多列的時候，你能夠開啓該選項  
  84.      * 從而在一個可橫向滾動的視圖裏面展現表格，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）  
  85.      */    
  86.     "sScrollX":"100%",    
  87.     /*  
  88.      * 默認爲空字符串，即：無效  
  89.      * 是否開啓垂直滾動，垂直滾動會驅使DataTable設置爲給定的長度，任何溢出到當前視圖以外的數據能夠經過垂直滾動進行察看  
  90.      * 當在小範圍區域中顯示大量數據的時候，能夠在分頁和垂直滾動中選擇一種方式，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）  
  91.      */    
  92.     "sScrollY":"100%",    
  93.     /*  
  94.      * 自定義語言設置  
  95.      */    
  96.     "oLanguage":{    
  97.         "oAria":{    
  98.         /*  
  99.          * 默認值爲activate to sort column ascending  
  100.          * 當一列被按照升序排序的時候添加到表頭的ARIA標籤，注意列頭是這個字符串的前綴（？）  
  101.          */    
  102.             "sSortAscending": " - click/return to sort ascending",    
  103.         /*  
  104.          * 默認值爲activate to sort column ascending  
  105.          * 當一列被按照升序降序的時候添加到表頭的ARIA標籤，注意列頭是這個字符串的前綴（？）  
  106.          */    
  107.             "sSortDescending": " - click/return to sort descending"    
  108.         },    
  109.         "oPaginate": {    
  110.             /*  
  111.              * 默認值爲First  
  112.              * 當使用全數字類型的分頁組件的時候，到第一頁按鈕上的文字  
  113.              */    
  114.             "sFirst": "First page",    
  115.             /*  
  116.              * 默認值爲Last  
  117.              * 當使用全數字類型的分頁組件的時候，到最後一頁按鈕上的文字  
  118.              */    
  119.             "sLast": "Last page",    
  120.             /*  
  121.              * 默認值爲Next  
  122.              * 當使用全數字類型的分頁組件的時候，到下一頁按鈕上的文字  
  123.              */    
  124.             "sNext": "Next page",    
  125.             /*  
  126.              * 默認值爲Previous  
  127.              * 當使用全數字類型的分頁組件的時候，到前一頁按鈕上的文字  
  128.              */    
  129.             "sPrevious": "Previous page"    
  130.         },    
  131.         /*  
  132.          * 默認值activate to sort column ascending爲  
  133.          * 當表格中沒有數據（無視由於過濾致使的沒有數據）時，該字符串年優先與sZeroRecords顯示  
  134.          * 注意這是個可選參數，若是沒有指定，sZeroRecrods會被使用（既不是默認值也不是給定的值）  
  135.          */    
  136.         "sEmptyTable": "No data available in table",    
  137.         /*  
  138.          * 默認值爲Showing _START_ to _END_ of _TOTAL_ entries   
  139.          * 該屬性給終端用戶提供當前頁面的展現信息，字符串中的變量會隨着表格的更新被動態替換，並且能夠被任意移動和刪除  
  140.          */    
  141.         "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)",    
  142.         /*  
  143.          * 默認值爲Showing 0 to 0 of 0 entries   
  144.          * 當表格中沒有數據時展現的表格信息，一般狀況下格式會符合sInfo的格式  
  145.          */    
  146.         "sInfoEmpty": "No entries to show",    
  147.         /*  
  148.          * 默認值爲(filtered from _MAX_ total entries)   
  149.          * 當用戶過濾表格中的信息的時候，該字符串會被附加到信息字符串的後面，從而給出過濾器強度的直觀概念  
  150.          */    
  151.         "sInfoFiltered": " - filtering from _MAX_ records",    
  152.         /*  
  153.          * 默認值爲空字符串  
  154.          * 使用該屬性能夠很方便的向表格信息字符串中添加額外的信息，被添加的信息在任什麼時候候都會被附加到表格信息組件的後面  
  155.          * sInfoEmpty和sInfoFiltered能夠以任何被使用的方式進行結合  
  156.          */    
  157.         "sInfoPostFix": "All records shown are derived from real information.",    
  158.         /*  
  159.          * 默認值爲‘,‘  
  160.          * DataTable有內建的格式化數字的工具，能夠用來格式化表格信息中較大的數字  
  161.          * 默認狀況下會自動調用，可使用該選項來自定義分割的字符   
  162.          */    
  163.         "sInfoThousands": "‘",    
  164.         /*  
  165.          * 默認值爲Show _MENU_ entries   
  166.          * 描述當分頁組件的下拉菜單的選項被改變的時候發生的動做，‘_MENU_‘變量會被替換爲默認的10，25，50，100  
  167.          * 若是須要的話能夠被自定義的下拉組件替換  
  168.          */    
  169.          "sLengthMenu": "Display _MENU_ records",    
  170.          /*  
  171.           * 默認值爲Loading...  
  172.           * 當使用Ajax數據源和表格在第一次被加載蒐集數據的時候顯示的字符串，該信息在一個空行顯示  
  173.           * 向終端用戶指明數據正在被加載，注意該參數在從服務器加載的時候無效，只有Ajax和客戶端處理的時候有效  
  174.           */    
  175.          "sLoadingRecords": "Please wait - loading...",    
  176.          /*  
  177.           * 默認值爲Processing...  
  178.           * 當表格處理用戶動做（例如排序或者相似行爲）的時候顯示的字符串  
  179.           */    
  180.          "sProcessing": "DataTables is currently busy",    
  181.          /*  
  182.           * 默認爲Search:  
  183.           * 描述用戶在輸入框輸入過濾條件時的動做，變量‘_INPUT_‘,若是用在字符串中  
  184.           * DataTable會使用用戶輸入的過濾條件替換_INPUT_爲HTML文本組件，從而能夠支配它（即用戶輸入的過濾條件）出如今信息字符串中的位置   
  185.           * 若是變量沒有指定，用戶輸入會自動添加到字符串後面  
  186.           */    
  187.          "sSearch": "Apply filter _INPUT_ to table",    
  188.          /*  
  189.           * 默認值爲空字符串，即：無效  
  190.           * 全部語言信息能夠被存儲在服務器端的文件中，DataTable能夠根據該參數指定的URL去尋找  
  191.           * 必須保存語言文件的URL信息，必須是JSON格式，對象和初始化中使用的oLanguage對象具備相同的屬性  
  192.           * 請參考示例文件來了解該參數是如何工做的  
  193.           */    
  194.          "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt",    
  195.          /*  
  196.           * 默認值爲No matching records found  
  197.           * 當對數據進行過濾操做後，若是沒有要顯示的數據，會在表格記錄中顯示該字符串  
  198.           * sEmptyTable只在表格中沒有數據的時候顯示，忽略過濾操做  
  199.           */    
  200.          "sZeroRecords": "No records to display"    
  201.      }    
  202.    });    
  203.  });    
  204.      
  205.  /*------------------------------------------------Options------------------------------------------------*/    
  206.  /*  
  207.   * bDestroy  
  208.   * 默認爲false  
  209.   * 使用傳遞的新的初始化對象中的屬性構造一個新的表格，並替換一個匹配指定的選擇器的表格  
  210.   * 若是沒有匹配到表格，新的表格會被做爲一個普通表格被構建  
  211.   */    
  212.  $(‘selector‘).dataTable({    
  213.       "bFilter": false,    
  214.       "bDestroy": true    
  215.   });    
  216.       
  217.   /*  
  218.    * bRetrieve  
  219.    * 默認爲false  
  220.    * 使用指定的選擇器檢索表格，注意，若是表格已經被初始化，該參數會直接返回已經被建立的對象  
  221.    * 並不會顧及你傳遞進來的初始化參數對象的變化，將該參數設置爲true說明你確認已經明白這一點  
  222.    * 若是你須要的話，bDestroy能夠用來從新初始化表格  
  223.    */    
  224.   $(document).ready(function(){    
  225.     initTable();    
  226.     tableActions();    
  227.   });    
  228.       
  229.   function initTable()    
  230.   {    
  231.     return $(‘#example‘).dataTable( {    
  232.       "sScrollY": "200px",    
  233.       "bPaginate": false,    
  234.       "bRetrieve": true    
  235.     });    
  236.   }    
  237.      
  238.  function tableActions()    
  239.  {    
  240.    var oTable = initTable();    
  241.    // perform API operations with oTable     
  242.  }    
  243.      
  244.  /*  
  245.   * bScrollAutoCss  
  246.   * 默認爲true  
  247.   * 指明DataTable中滾動的標題元素是否被容許設置內邊距和外邊距等  
  248.   */    
  249.  $(document).ready(function(){    
  250.    $(‘#example‘).dataTable( {    
  251.      "bScrollAutoCss": false,    
  252.      "sScrollY": "200px"    
  253.    });    
  254.  });    
  255.      
  256.  /*  
  257.   * bScrollCollapse  
  258.   * 默認爲false  
  259.   * 當垂直滾動被容許的時候，DataTable會強制表格視圖在任什麼時候候都是給定的高度（對佈局有利）  
  260.   * 不過，當把數據集過濾到十分小的時候看起來會很古怪，並且頁腳會留在最下面  
  261.   * 當結果集的高度比給定的高度小時該參數會使表格高度自適應  
  262.   */    
  263.  $(document).ready(function(){    
  264.    $(‘#example‘).dataTable( {    
  265.      "sScrollY": "200",    
  266.      "bScrollCollapse": true    
  267.    });    
  268.  });    
  269.      
  270.  /*  
  271.   * bSortCellsTop  
  272.   * 默認爲false  
  273.   * 是否容許DataTable使用頂部（默認爲true）的單元格，或者底部（默認爲false）的單元格，當使用複合表頭的時候會有些用處  
  274.   */    
  275.  $(document).ready(function(){    
  276.    $(‘#example‘).dataTable( {    
  277.      "bSortCellsTop": true    
  278.    });    
  279.  });    
  280.      
  281.  /*  
  282.   * iCookieDuration  
  283.   * 默認爲7200秒（2個小時）  
  284.   * 設置用來存儲會話信息的cookie的持續時間，單位是秒  
  285.   */    
  286.  $(document).ready(function(){    
  287.    $(‘#example‘).dataTable( {    
  288.      "iCookieDuration": 60*60*24 // 1 day    
  289.    });    
  290.  })    
  291.      
  292.  /*  
  293.   * iDeferLoading  
  294.   * 默認爲null  
  295.   * 當選項被開啓的時候，DataTable在非加載第一次的時候不會向服務器請求數據，而是會使用頁面上的已有數據（不會應用排序等）  
  296.   * 所以在加載的時候保留一個XmlHttpRequest，iDeferLoading被用來指明須要延遲加載，並且也用來通知DataTable一個滿的表格有多少條數據  
  297.   * 信息元素和分頁會被正確保留  
  298.   */    
  299.  $(document).ready(function(){    
  300.    $(‘#example‘).dataTable( {    
  301.      "bServerSide": true,    
  302.      "sAjaxSource": "scripts/server_processing.php",    
  303.      "iDeferLoading": 57    
  304.    });    
  305.  });    
  306.      
  307.  /*  
  308.   * iDisplayLength  
  309.   * 默認爲10  
  310.   * 單頁顯示的數據的條數，若是bLengthChange屬性被開啓，終端用戶能夠經過一個彈出菜單重寫該數值  
  311.   */    
  312.  $(document).ready(function(){    
  313.    $(‘#example‘).dataTable( {    
  314.      "bServerSide": true,    
  315.      "sAjaxSource": "scripts/server_processing.php",    
  316.      "iDeferLoading": 57    
  317.    });    
  318.  });    
  319.      
  320.  /*  
  321.   * iDisplayStart  
  322.   * 默認爲0  
  323.   * 當開啓分頁的時候，定義展現的記錄的起始序號，不是頁數，所以若是你每一個分頁有10條記錄並且想從第三頁開始  
  324.   * 須要把該參數指定爲20  
  325.   */    
  326.  $(document).ready(function(){    
  327.    $(‘#example‘).dataTable( {    
  328.      "iDisplayStart": 20    
  329.    });    
  330.  })    
  331.      
  332.  /*  
  333.   * iScrollLoadGap  
  334.   * 默認爲100  
  335.   * 滾動餘界是指DataTable在當前頁面還有多少條數據可供滾動時自動加載新的數據，你可能但願指定一個足夠大的餘界  
  336.   * 以便滾動加載數據的操做對用戶來講是平滑的，同時也不會大到加載比須要的多的多的數據  
  337.   */    
  338.  $(document).ready(function(){    
  339.    $(‘#example‘).dataTable( {    
  340.      "bScrollInfinite": true,    
  341.      "bScrollCollapse": true,    
  342.      "sScrollY": "200px",    
  343.      "iScrollLoadGap": 50    
  344.    });    
  345.  });    
  346.      
  347.  /*  
  348.   * iTabIndex  
  349.   * 默認爲0  
  350.   * 默認狀況下DataTable容許經過爲須要鍵盤導航的元素添加tabindex屬性來進行導航（排序、分頁、過濾）  
  351.   * 容許你經過tab鍵切換控制組件，使用回車鍵去激活他們，默認爲0表示按照文檔流來切換  
  352.   * 若是須要的話，你可使用該參數重寫切換順序，使用-1來禁止內建的鍵盤導航  
  353.   */    
  354.  $(document).ready(function(){    
  355.    $(‘#example‘).dataTable( {    
  356.      "iTabIndex": 1    
  357.    });    
  358.  });    
  359.      
  360.  /*  
  361.   * oSearch  
  362.   * 無默認值  
  363.   * 該參數容許你在初始化的時候使用已經定義的全局過濾狀態，sSearch對象必須被定義，可是全部的其它選項都是可選的  
  364.   * 當bRegex爲true的時候，搜索字符串會被看成正則表達式，當爲false（默認）的時候，會被直接看成一個字符串  
  365.   * 當bSmart爲true的時候，DataTable會使用使用靈活過濾策略（匹配任何可能的數據），爲false的時候不會這樣作  
  366.   */    
  367.  $(document).ready(function(){    
  368.      $(‘#example‘).dataTable( {    
  369.          "oSearch": {"sSearch": "Initial search"}    
  370.      });    
  371.  })    
  372.      
  373.  /*  
  374.   * sAjaxDataProp  
  375.   * 默認爲aaData  
  376.   * 當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性做爲數據源  
  377.   * 該選項容許變動數據源的名稱，你可使用JavaScript的點號對象表示法去訪問多級網狀數據源  
  378.   */    
  379.  // Get data from { "data": [...] }    
  380.  $(document).ready(function(){    
  381.    var oTable = $(‘#example‘).dataTable( {    
  382.      "sAjaxSource": "sources/data.txt",    
  383.      "sAjaxDataProp": "data"    
  384.    });    
  385.  });    
  386.      
  387.  // Get data from { "data": { "inner": [...] } }    
  388.  $(document).ready(function(){    
  389.    var oTable = $(‘#example‘).dataTable( {    
  390.      "sAjaxSource": "sources/data.txt",    
  391.      "sAjaxDataProp": "data.inner"    
  392.    });    
  393.  });    
  394.      
  395.  /*  
  396.   * sAjaxSource  
  397.   * 默認爲null  
  398.   * 該參數用來向DataTable指定加載的外部數據源（若是想使用現有的數據，請使用aData）  
  399.   * 能夠簡單的提供一個能夠用來得到數據url或者JSON對象，該對象必須包含aaData，做爲表格的數據源  
  400.   */    
  401.  $(document).ready(function(){    
  402.    $(‘#example‘).dataTable( {    
  403.      "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"    
  404.    });    
  405.  })    
  406.      
  407.  /*  
  408.   * sCookiePrefix  
  409.   * 默認爲SpryMedia_DataTables_  
  410.   * 該參數能夠用來重寫DataTable默認指定的用來存儲狀態信息的cookie的前綴  
  411.  */    
  412.  $(document).ready(function(){    
  413.    $(‘#example‘).dataTable( {    
  414.      "sCookiePrefix": "my_datatable_",    
  415.    });    
  416.  });    
  417.      
  418.  /*  
  419.   * sDom  
  420.   * 默認值爲lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)  
  421.   * 該初始化屬性用來指定你想把各類控制組件注入到dom節點的位置（好比你想把分頁組件放到表格的頂部）  
  422.   * DIV元素（帶或者不帶自定的class）能夠添加目標樣式，下列語法被使用  
  423.   *  可供使用的選項  
  424.   *      ‘l‘ - 長度改變  
  425.   *      ‘f‘ - 過濾輸入  
  426.   *      ‘t‘ - 表格  
  427.   *      ‘i‘ - 信息  
  428.   *      ‘p‘ - 分頁  
  429.   *      ‘r‘ - 處理  
  430.   *  可供使用的常量  
  431.   *      ‘H‘ - jQueryUI theme "header" classes(‘fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix‘)  
  432.   *      ‘F‘ - jQueryUI theme "footer" classes (‘fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix‘)  
  433.   *  須要的語法  
  434.   *      ‘<‘ 和 ‘>‘ - div元素  
  435.   *      ‘<"class" and ‘>‘ - 帶有class屬性的div元素  
  436.   *      ‘<"#id" and ‘>‘ - 帶有id屬性的div元素  
  437.   *  例子  
  438.   *      ‘<"wrapper"flipt>‘  
  439.   *      ‘<lf<t>ip>‘  
  440.   */    
  441.  $(document).ready(function(){    
  442.    $(‘#example‘).dataTable( {    
  443.      "sDom": ‘<"top"i>rt<"bottom"flp><"clear"&lgt;‘    
  444.    });    
  445.  });    
  446.      
  447.  /*  
  448.   * sPaginationType  
  449.   * 默認爲two_button  
  450.   * DataTable內建了兩種交互式分頁策略，兩個按鈕和全頁數，展示給終端用戶不一樣的控制方式  
  451.   * 能夠經過API增長策略  
  452.   */    
  453.  $(document).ready(function(){    
  454.      $(‘#example‘).dataTable( {    
  455.          "sPaginationType": "full_numbers"    
  456.      });    
  457.  })    
  458.      
  459.  /*  
  460.   * sScrollXInner  
  461.   * 默認爲空字符串，即：無效  
  462.   * 當橫向滾動可用的時候，該屬性能夠用來強制DataTable的寬度比須要的更長  
  463.   * 好比你須要表格彼此相隔適宜，該變量能夠用來使表格變大，並且強制滾動  
  464.   * 該該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）  
  465.   */    
  466.  $(document).ready(function(){    
  467.      $(‘#example‘).dataTable( {    
  468.          "sScrollX": "100%",    
  469.          "sScrollXInner": "110%"    
  470.      });    
  471.  });    
  472.      
  473.  /*  
  474.   * sServerMethod  
  475.   * 默認值爲GET  
  476.   * 設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式  
  477.   */    
  478.  $(document).ready(function(){    
  479.      $(‘#example‘).dataTable({    
  480.          "bServerSide": true,    
  481.          "sAjaxSource": "scripts/post.php",    
  482.          "sServerMethod": "POST"    
  483.      });    
  484.  });    
  485.  /*------------------------------------------------Callback------------------------------------------------*/    
  486.  /*  
  487.   * fnCookieCallback  
  488.   * 無默認值  
  489.   * 當DataTable的狀態保留可用時，自定義被保存的cookie和參數。只要cookie被修改就會調用此方法  
  490.   * 該方法須要返回一個格式良好的cookie字符串，注意數據對象是以Javascript對象的形式傳遞進來的，必須轉換成字符串，例如JSON格式  
  491.   */    
  492.  $(document).ready(function (){    
  493.    $(‘#example‘).dataTable({    
  494.      "fnCookieCallback": function (sName, oData, sExpires, sPath) {    
  495.        // Customise oData or sName or whatever else here    
  496.        return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;    
  497.      }    
  498.    });    
  499.  });    
  500.      
  501.  /*  
  502.   * fnCreatedRow  
  503.   * 無默認值  
  504.   * 當一個新的TR元素（而且全部TD子元素被插入）被建立或者被做爲一個DOM資源被註冊時調用該函數  
  505.   * 容許操做該TR元素  
  506.   */    
  507.  $(document).ready(function(){    
  508.      $(‘#example‘).dataTable({    
  509.          "fnCreatedRow": function( nRow, aData, iDataIndex ){    
  510.              // Bold the grade for all ‘A‘ grade browsers    
  511.              if ( aData[4] == "A" )    
  512.      {    
  513.          $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ );    
  514.      }    
  515.          }    
  516.      });    
  517.  });    
  518.      
  519.  /*  
  520.   * fnDrawCallback  
  521.   * 無默認值  
  522.   * 每當draw事件發生時調用該函數，容許你動態編輯新建的dom對象的任何屬性  
  523.   */    
  524.  $(document).ready( function(){    
  525.      $(‘#example‘).dataTable({    
  526.          "fnDrawCallback": function(){    
  527.              alert( ‘DataTables has redrawn the table‘ );    
  528.          }    
  529.      });    
  530.  });    
  531.      
  532.  /*  
  533.   * fnFooterCallback  
  534.   * 無默認值  
  535.   * 與fnHeaderCallback()徹底相同，只是該函數容許你在每個draw時間發生時修改頁腳  
  536.   */    
  537.  $(document).ready( function(){    
  538.      $(‘#example‘).dataTable({    
  539.          "fnDrawCallback": function() {    
  540.              alert( ‘DataTables has redrawn the table‘ );    
  541.          }    
  542.      });    
  543.  });    
  544.      
  545.  /*  
  546.   * fnFormatNumber  
  547.   * 無默認值  
  548.   * 當渲染表格信息（例如：顯示57條記錄中的1-10條）中大的數字時  
  549.   * 爲了方便用戶，DataTable會使用逗號分割每千單位（例如1000000會被渲染爲1,000,000）  
  550.   * 該函數會重寫DataTable默認使用的策略  
  551.   */    
  552.  $(document).ready(function(){    
  553.    $(‘#example‘).dataTable({    
  554.      "fnFormatNumber": function ( iIn ) {    
  555.        if ( iIn < 1000 ) {    
  556.          return iIn;    
  557.        } else {    
  558.          var    
  559.            s=(iIn+""),    
  560.            a=s.split(""), out="",    
  561.            iLen=s.length;    
  562.      
  563.          for ( var i=0 ; i<iLen ; i++ ) {    
  564.            if ( i%3 === 0 && i !== 0 ) {    
  565.              out = "‘"+out;    
  566.            }    
  567.            out = a[iLen-i-1]+out;    
  568.          }    
  569.        }    
  570.        return out;    
  571.      };    
  572.    });    
  573.  });    
  574.      
  575.  /*  
  576.   * fnHeaderCallback  
  577.   * 無默認值  
  578.   * 每當draw事件發生時調用該函數，容許你動態編輯表頭行，能夠用來計算和展現關於表格的有用的信息  
  579.   */    
  580.  $(document).ready(function(){    
  581.      $(‘#example‘).dataTable({    
  582.          "fnFormatNumber": function ( iIn ) {    
  583.              if ( iIn < 1000 ) {    
  584.                  return iIn;    
  585.              } else {    
  586.                  var    
  587.          s=(iIn+""),    
  588.          a=s.split(""), out="",    
  589.          iLen=s.length;    
  590.      
  591.      for ( var i=0 ; i<iLen ; i++ ) {    
  592.          if ( i%3 === 0 && i !== 0 ) {    
  593.              out = "‘"+out;    
  594.          }    
  595.          out = a[iLen-i-1]+out;    
  596.      }    
  597.              }    
  598.              return out;    
  599.          };    
  600.      });    
  601.  });    
  602.      
  603.  /*  
  604.   * fnInfoCallback  
  605.   * 無默認值  
  606.   * 信息元素能夠用來傳輸表格當前狀態的信息，儘管DataTable提供的國際化的選項在處理大多數自定義狀況時已經至關方便了  
  607.   * 或許你有時仍然但願自定義深層的字符串,該函數會知足你的須要  
  608.   */    
  609.  $(‘#example‘).dataTable( {    
  610.      "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {    
  611.          return iStart +" to "+ iEnd;    
  612.      }    
  613.  });    
  614.      
  615.  /*  
  616.   * fnInitComplete  
  617.   * 無默認值  
  618.   * 當表格被初始化後調用該函數，一般DataTable會被持續初始化，並不須要該函數  
  619.   * 但是，當使用異步的XmlHttpRequest從外部得到語言信息時，初始化並非持續的  
  620.   */    
  621.  $(document).ready( function(){    
  622.      $(‘#example‘).dataTable({    
  623.          "fnInitComplete": function(oSettings, json) {    
  624.              alert( ‘DataTables has finished its initialisation.‘ );    
  625.          }    
  626.      });    
  627.  })    
  628.      
  629.  /*  
  630.   * fnPreDrawCallback  
  631.   * 無默認值  
  632.   * 在每個表格draw事件發生前調用該函數，經過返回false來取消draw事件  
  633.   * 其它任何的返回值，包括undefined都會致使draw事件的發生  
  634.   */    
  635.  $(document).ready( function(){    
  636.      $(‘#example‘).dataTable({    
  637.          "fnPreDrawCallback": function( oSettings ) {    
  638.              if ( $(‘#test‘).val() == 1 ) {    
  639.                  return false;    
  640.              }    
  641.          }    
  642.      });    
  643.  });    
  644.      
  645.  /*  
  646.   * fnRowCallback  
  647.   * 無默認值  
  648.   * 你能夠經過該函數在每個表格繪製事件發生以後，渲染到屏幕上以前，向表格裏的每一行傳遞‘處理過程‘  
  649.   * 該函數能夠用來設置行的class名字等  
  650.   */    
  651.  $(document).ready(function(){    
  652.      $(‘#example‘).dataTable({    
  653.          "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {    
  654.              // Bold the grade for all ‘A‘ grade browsers    
  655.              if ( aData[4] == "A" )    
  656.      {    
  657.          $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ );    
  658.      }    
  659.          }    
  660.      });    
  661.  });    
  662.      
  663.  /*  
  664.   * fnServerData  
  665.   * 無默認值  
  666.   * 你可使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用  
  667.   * 例如你可使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據  
  668.   */    
  669.  // POST data to server    
  670.  $(document).ready(function(){    
  671.      $(‘#example‘).dataTable( {    
  672.          "bProcessing": true,    
  673.          "bServerSide": true,    
  674.          "sAjaxSource": "xhr.php",    
  675.          "fnServerData": function ( sSource, aoData, fnCallback ) {    
  676.              $.ajax( {    
  677.                  "dataType": ‘json‘,    
  678.              "type": "POST",    
  679.              "url": sSource,    
  680.              "data": aoData,    
  681.              "success": fnCallback    
  682.              } );    
  683.          }    
  684.      });    
  685.  });    
  686.      
  687.  /*  
  688.   * fnServerParams  
  689.   * 無默認值  
  690.   * 用來在向服務器發送Ajax請求時發送額外的數據，例如自定義的過濾信息，該函數使向服務器發送額外參數變得簡單  
  691.   * 傳遞進來的參數是DataTable創建的數據集合，你能夠根據須要添加或者修改該集合  
  692.   */    
  693.  $(document).ready(function(){    
  694.      $(‘#example‘).dataTable( {    
  695.          "bProcessing": true,    
  696.          "bServerSide": true,    
  697.          "sAjaxSource": "scripts/server_processing.php",    
  698.          "fnServerParams": function ( aoData ) {    
  699.              aoData.push( { "name": "more_data", "value": "my_value" } );    
  700.          }    
  701.      });    
  702.  });    
  703.      
  704.  /*  
  705.   * fnStateLoad  
  706.   * 無默認值  
  707.   * 加載表格狀態，使用該函數你能夠定義狀態信息加載的位置和方式，默認狀況下DataTable會從cookie中加載  
  708.   * 不過你或許但願使用本地存儲（HTML5支持），或者服務端數據庫  
  709.   */    
  710.  $(document).ready(function(){    
  711.      $(‘#example‘).dataTable({    
  712.          "bStateSave": true,    
  713.          "fnStateSave": function (oSettings, oData) {    
  714.              var o;    
  715.      
  716.              // Send an Ajax request to the server to get the data. Note that    
  717.              // this is a synchronous request.    
  718.              $.ajax( {    
  719.                  "url": "/state_load",    
  720.                  "async": false,    
  721.                  "dataType": "json",    
  722.                  "success": function (json) {    
  723.                      o = json;    
  724.                  }    
  725.              } );    
  726.              return o;    
  727.          }    
  728.      });    
  729.  });    
  730.      
  731.  /*  
  732.   * fnStateLoadParams  
  733.   * 無默認值  
  734.   * 該回調能夠用來在加載狀態信息以前編輯狀態信息  
  735.   * 函數在表格從存儲的數據加載狀態信息時調用，在表格<當前使用的設置對象>被<從保存信息中加載的設置對象>修改之前調用  
  736.   * 注意做爲插件開發者，你應該使用‘stateLoadParams‘事件去加載plug-in的參數  
  737.   */    
  738.  // Remove a saved filter, so filtering is never loaded    
  739.  $(document).ready(function(){    
  740.      $(‘#example‘).dataTable({    
  741.          "bStateSave": true,    
  742.          "fnStateLoadParams": function (oSettings, oData) {    
  743.              oData.oFilter.sSearch = "";    
  744.          });    
  745.      });    
  746.      
  747.      
  748.  // Disallow state loading by returning false    
  749.  $(document).ready(function(){    
  750.      $(‘#example‘).dataTable({    
  751.          "bStateSave": true,    
  752.          "fnStateLoadParams": function (oSettings, oData) {    
  753.              return false;    
  754.          });    
  755.      });    
  756.      
  757.  /*  
  758.   * fnStateLoaded  
  759.   * 無默認值  
  760.   * 在表格狀態被狀態存儲方法讀取和DataTable設置對象被修改時調用，做爲被狀態信息被加載的結果  
  761.   */    
  762.  // Show an alert with the filtering value that was saved    
  763.  $(document).ready(function(){    
  764.      $(‘#example‘).dataTable({    
  765.          "bStateSave": true,    
  766.          "fnStateLoaded": function (oSettings, oData) {    
  767.              alert( ‘Saved filter was: ‘+oData.oFilter.sSearch );    
  768.          });    
  769.      });    
  770.      
  771.  /*  
  772.   * fnStateSave  
  773.   * 無默認值  
  774.   * 保存表格狀態，使用該函數你能夠定義狀態信息保存的位置和方式，默認狀況下DataTable會保存在cookie中  
  775.   * 不過你或許但願使用本地存儲（HTML5支持），或者服務端數據庫  
  776.   */    
  777.  $(document).ready(function(){    
  778.      $(‘#example‘).dataTable({    
  779.          "bStateSave": true,    
  780.          "fnStateSave": function (oSettings, oData) {    
  781.              // Send an Ajax request to the server with the state object    
  782.              $.ajax( {    
  783.                  "url": "/state_save",    
  784.              "data": oData,    
  785.              "dataType": "json",    
  786.              "method": "POST"    
  787.                  "success": function () {}    
  788.              });    
  789.          }    
  790.      });    
  791.  });    
  792.      
  793.  /*  
  794.   * fnStateSaveParams  
  795.   * 無默認值  
  796.   * 該回調容許你編輯被保存的狀態信息，在表格改變了狀態信息須要保存的時候調用  
  797.   * 可使用該回調在保存狀態信息的對象被保存之前對其進行修改，包括添加或者其它狀態屬性或者修改  
  798.   */    
  799.  // Remove a saved filter, so filtering is never saved    
  800.  $(document).ready(function(){    
  801.      $(‘#example‘).dataTable({    
  802.          "bStateSave": true,    
  803.          "fnStateLoadParams": function (oSettings, oData) {    
  804.              oData.oFilter.sSearch = "";    
  805.          });    
  806.      });    
  807.  /*------------------------------------------------Columns------------------------------------------------*/    
  808.  /*  
  809.   * aDataSort  
  810.   * 默認爲null,自動使用列序號做爲默認  
  811.   * 在排序一列的時候同時將其它幾列也排序，例如名和姓做爲多列排序  
  812.   */    
  813.  // Using aoColumnDefs    
  814.  $(document).ready(function(){    
  815.      $(‘#example‘).dataTable({    
  816.          "aoColumnDefs": [    
  817.      { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },    
  818.          { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },    
  819.          { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }    
  820.      ]    
  821.      });    
  822.  });    
  823.      
  824.      
  825.  // Using aoColumns    
  826.  $(document).ready(function(){    
  827.      $(‘#example‘).dataTable({    
  828.          "aoColumns": [    
  829.      { "aDataSort": [ 0, 1 ] },    
  830.          { "aDataSort": [ 1, 0 ] },    
  831.          { "aDataSort": [ 2, 3, 4 ] },    
  832.          null,    
  833.          null    
  834.          ]    
  835.      });    
  836.  });    
  837.      
  838.  /*  
  839.   * asSorting  
  840.   * 默認爲[ ‘asc‘, ‘desc‘ ]   
  841.   * 你能夠經過該參數控制默認排序的方向，甚至改變排序處理器的行爲（例如：只容許升序排序）  
  842.   */    
  843.  // Using aoColumnDefs    
  844.  $(document).ready(function(){    
  845.      $(‘#example‘).dataTable({    
  846.          "aoColumnDefs": [    
  847.      { "asSorting": [ "asc" ], "aTargets": [ 1 ] },    
  848.          { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },    
  849.          { "asSorting": [ "desc" ], "aTargets": [ 3 ] }    
  850.      ]    
  851.      });    
  852.  });    
  853.      
  854.      
  855.  // Using aoColumns    
  856.  $(document).ready(function(){    
  857.      $(‘#example‘).dataTable( {    
  858.          "aoColumns": [    
  859.          null,    
  860.          { "asSorting": [ "asc" ] },    
  861.          { "asSorting": [ "desc", "asc", "asc" ] },    
  862.          { "asSorting": [ "desc" ] },    
  863.          null    
  864.          ]    
  865.      });    
  866.  });    
  867.      
  868.  /*  
  869.   * bSearchable  
  870.   * 默認爲true  
  871.   * 是否在列上應用過濾  
  872.   */    
  873.  // Using aoColumnDefs    
  874.  $(document).ready(function(){    
  875.      $(‘#example‘).dataTable({    
  876.          "aoColumnDefs": [    
  877.      { "bSearchable": false, "aTargets": [ 0 ] }    
  878.      ]} );    
  879.  });    
  880.      
  881.      
  882.  // Using aoColumns    
  883.  $(document).ready(function(){    
  884.      $(‘#example‘).dataTable({    
  885.          "aoColumns": [    
  886.      { "bSearchable": false },    
  887.          null,    
  888.          null,    
  889.          null,    
  890.          null    
  891.          ] });    
  892.  });    
  893.      
  894.  /*  
  895.   * bSortable  
  896.   * 默認爲true  
  897.   * 是否在某一列上開啓排序  
  898.   */    
  899.  // Using aoColumnDefs    
  900.  $(document).ready(function(){    
  901.      $(‘#example‘).dataTable({    
  902.          "aoColumnDefs": [    
  903.      { "bSortable": false, "aTargets": [ 0 ] }    
  904.      ] });    
  905.  });    
  906.      
  907.      
  908.  // Using aoColumns    
  909.  $(document).ready(function(){    
  910.      $(‘#example‘).dataTable( {    
  911.          "aoColumns": [    
  912.      { "bSortable": false },    
  913.          null,    
  914.          null,    
  915.          null,    
  916.          null    
  917.          ] });    
  918.  });    
  919.      
  920.  /*  
  921.   * bUseRendered  
  922.   * 默認爲true  
  923.   * 當對一列使用使用fnRender時，你或許但願使用原始的數據（渲染之前）去排序或者過濾（默認是使用用戶看到的渲染過的數據）  
  924.   * 或許對日期類型有些用處，注意，如今建議使用mDataProp做爲函數而且使用該函數提供的type參數，來容許不一樣的數據被用來排序，過濾，展示和類型檢測  
  925.   */    
  926.  // Using aoColumnDefs    
  927.  $(document).ready(function() {    
  928.      $(‘#example‘).dataTable( {    
  929.          "aoColumnDefs": [    
  930.      {    
  931.          "fnRender": function ( oObj ) {    
  932.              return oObj.aData[0] +‘ ‘+ oObj.aData[3];    
  933.          },    
  934.          "bUseRendered": false,    
  935.          "aTargets": [ 0 ]    
  936.      }    
  937.      ]    
  938.      } );    
  939.  } );    
  940.      
  941.  // Using aoColumns    
  942.  $(document).ready(function() {    
  943.      $(‘#example‘).dataTable( {    
  944.          "aoColumns": [    
  945.      {    
  946.          "fnRender": function ( oObj ) {    
  947.              return oObj.aData[0] +‘ ‘+ oObj.aData[3];    
  948.          },    
  949.          "bUseRendered": false    
  950.      },    
  951.          null,    
  952.          null,    
  953.          null,    
  954.          null    
  955.          ]    
  956.      } );    
  957.  } );    
  958.      
  959.  /*  
  960.   * bVisible  
  961.   * 默認值爲true  
  962.   * 是否展現某一列  
  963.   */    
  964.  // Using aoColumnDefs    
  965.  $(document).ready(function() {    
  966.      $(‘#example‘).dataTable( {    
  967.          "aoColumnDefs": [    
  968.      { "bVisible": false, "aTargets": [ 0 ] }    
  969.      ] } );    
  970.  } );    
  971.      
  972.      
  973.  // Using aoColumns    
  974.  $(document).ready(function() {    
  975.      $(‘#example‘).dataTable( {    
  976.          "aoColumns": [    
  977.      { "bVisible": false },    
  978.          null,    
  979.          null,    
  980.          null,    
  981.          null    
  982.          ] } );    
  983.  } );    
  984.      
  985.  /*  
  986.   * fnCreatedCell  
  987.   * 無默認值  
  988.   * 每當新的單元格被創建（Ajax源等）或者處理輸入（DOM源）時，開發者可定義的函數會被調用  
  989.   * 該屬性用做fnRender的補充來容許你修改在fnRender函數調用以後新建的DOM元素（例如增長背景顏色）  
  990.   */    
  991.  $(document).ready(function() {    
  992.      $(‘#example‘).dataTable( {    
  993.          "aoColumnDefs": [ {    
  994.              "aTargets": [3],    
  995.          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {    
  996.              if ( sData == "1.7" ) {    
  997.                  $(nTd).css(‘color‘, ‘blue‘)    
  998.              }    
  999.          }    
  1000.          } ]    
  1001.      });    
  1002.  } );    
  1003.      
  1004.  /*  
  1005.   * fnRender  
  1006.   * 無默認值  
  1007.   * 自定義列中每一個單元格被展現的時候調用的展現函數  
  1008.   */    
  1009.  // Using aoColumnDefs    
  1010.  $(document).ready(function() {    
  1011.      $(‘#example‘).dataTable( {    
  1012.          "aoColumnDefs": [    
  1013.      {    
  1014.          "fnRender": function ( o, val ) {    
  1015.              return o.aData[0] +‘ ‘+ o.aData[3];    
  1016.          },    
  1017.          "aTargets": [ 0 ]    
  1018.      }    
  1019.      ]    
  1020.      } );    
  1021.  } );    
  1022.      
  1023.      
  1024.  // Using aoColumns    
  1025.  $(document).ready(function() {    
  1026.      $(‘#example‘).dataTable( {    
  1027.          "aoColumns": [    
  1028.      { "fnRender": function ( o, val ) {    
  1029.                                            return o.aData[0] +‘ ‘+ o.aData[3];    
  1030.                                        } },    
  1031.          null,    
  1032.          null,    
  1033.          null,    
  1034.          null    
  1035.          ]    
  1036.      } );    
  1037.  } );    
  1038.      
  1039.  /*  
  1040.   * iDataSort  
  1041.   * 默認值爲-1，使用自動計算的列標  
  1042.   * 當選擇該列進行排序的時候，你但願調用排序操做的列的列號，該參數能夠用來按隱藏列排序  
  1043.   */    
  1044.  // Using aoColumnDefs    
  1045.  $(document).ready(function() {    
  1046.      $(‘#example‘).dataTable( {    
  1047.          "aoColumnDefs": [    
  1048.      { "iDataSort": 1, "aTargets": [ 0 ] }    
  1049.      ]    
  1050.      } );    
  1051.  } );    
  1052.      
  1053.  // Using aoColumns    
  1054.  $(document).ready(function() {    
  1055.      $(‘#example‘).dataTable( {    
  1056.          "aoColumns": [    
  1057.      { "iDataSort": 1 },    
  1058.          null,    
  1059.          null,    
  1060.          null,    
  1061.          null    
  1062.          ]    
  1063.      } );    
  1064.  } );    
  1065.      
  1066.  /*  
  1067.   * mDataProp  
  1068.   * 默認爲null,使用自動計算的列標  
  1069.   * 該屬性能夠從任何JSON格式數據源讀取屬性，包括深層網狀的對象和屬性，  
  1070.   * 有幾種不一樣的傳遞方式能夠影響mDataProp的行爲  
  1071.   * 整型：被看成數據源的數組下表，是DataTable使用的默認行爲（每列遞增）  
  1072.   * 字符串類型：被看成從數據源獲取的對象的屬性名，注意你可使用Javascript點號訪問符去訪問深層次的屬性或數組  
  1073.   * null：sDafaultContent選項會被使用到單元格上，（默認是空字符串，當生成可編輯列、可刪除列的時候可使用該屬性）  
  1074.   * 函數：當表格獲取或者設置單元格時被調用的函數，函數有三個參數  
  1075.   *      {array|object}:該行的數據源  
  1076.   *      {string}:調用數據請求的類型，設置數據時是‘set‘，收集數據時是‘filter‘,‘display‘,‘type‘,‘sort‘  
  1077.   *      {*}:當第二個參數是set的時候，要被設置的數據  
  1078.   *      當類型是‘set‘的時候，該函數不須要返回一個值，除此以外，返回值是能夠用來請求數據的  
  1079.   */    
  1080.  // Read table data from objects    
  1081.  $(document).ready(function() {    
  1082.      var oTable = $(‘#example‘).dataTable( {    
  1083.          "sAjaxSource": "sources/deep.txt",    
  1084.          "aoColumns": [    
  1085.      { "mDataProp": "engine" },    
  1086.          { "mDataProp": "browser" },    
  1087.          { "mDataProp": "platform.inner" },    
  1088.          { "mDataProp": "platform.details.0" },    
  1089.          { "mDataProp": "platform.details.1" }    
  1090.      ]    
  1091.      } );    
  1092.  } );    
  1093.      
  1094.      
  1095.  // Using mDataProp as a function to provide different information for    
  1096.  // sorting, filtering and display. In this case, currency (price)    
  1097.  $(document).ready(function() {    
  1098.      var oTable = $(‘#example‘).dataTable( {    
  1099.          "aoColumnDefs": [    
  1100.      {    
  1101.          "aTargets": [ 0 ],    
  1102.          "mDataProp": function ( source, type, val ) {    
  1103.              if (type === ‘set‘) {    
  1104.                  source.price = val;    
  1105.                  // Store the computed dislay and filter values for efficiency    
  1106.                  source.price_display = val=="" ? "" : "$"+numberFormat(val);    
  1107.                  source.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;    
  1108.                  return;    
  1109.              }    
  1110.              else if (type === ‘display‘) {    
  1111.                  return source.price_display;    
  1112.              }    
  1113.              else if (type === ‘filter‘) {    
  1114.                  return source.price_filter;    
  1115.              }    
  1116.      // ‘sort‘ and ‘type‘ both just use the integer    
  1117.      return source.price;    
  1118.          }    
  1119.      ]    
  1120.      } );    
  1121.      } );    
  1122.      
  1123.  /*  
  1124.   * sClass  
  1125.   * 默認值爲空字符串  
  1126.   * 該列的每個單元格被賦予的class  
  1127.   */    
  1128.  // Using aoColumnDefs    
  1129.  $(document).ready(function() {    
  1130.      $(‘#example‘).dataTable( {    
  1131.          "aoColumnDefs": [    
  1132.      { "sClass": "my_class", "aTargets": [ 0 ] }    
  1133.      ]    
  1134.      } );    
  1135.  } );    
  1136.      
  1137.  // Using aoColumns    
  1138.  $(document).ready(function() {    
  1139.      $(‘#example‘).dataTable( {    
  1140.          "aoColumns": [    
  1141.      { "sClass": "my_class" },    
  1142.          null,    
  1143.          null,    
  1144.          null,    
  1145.          null    
  1146.          ]    
  1147.      } );    
  1148.  } );    
  1149.      
  1150.  /*  
  1151.   * sContentPadding  
  1152.   * 默認值爲空字符串  
  1153.   * 當DataTable計算分配給每一列的列寬的時候，會尋找每一列中最長的字符串，而後構建一個臨時表  
  1154.   * 從臨時表中讀取寬度，這樣帶來的問題是‘mmm‘會比‘iiii‘的長度長不少，可是後者的長度要大  
  1155.   * 這樣計算值會出現誤差（正確的處理而後放入DOM對象再測量長度會至關的慢），咱們提供了這個選項做爲一個解決方法  
  1156.   * 它會把他的值添加到該列最長的值的後面來計算列寬，一般你不須要該屬性，該屬性也沒有被寫到DataTables.net的文檔中  
  1157.   */    
  1158.  // Using aoColumns    
  1159.  $(document).ready(function() {    
  1160.    $(‘#example‘).dataTable( {    
  1161.      "aoColumns": [    
  1162.        null,    
  1163.        null,    
  1164.        null,    
  1165.        {    
  1166.          "sContentPadding": "mmm"    
  1167.        }    
  1168.      ]    
  1169.    } );    
  1170.  } );    
  1171.      
  1172.  /*  
  1173.   * sDefaultContent  
  1174.   * 默認爲空字符串  
  1175.   * 容許給列值一個默認值，只要發現null值就會顯示默認值  
  1176.   * 能夠由mDataProp設置爲null或者數據源是null引發  
  1177.   */    
  1178.  // Using aoColumnDefs    
  1179.  $(document).ready(function() {    
  1180.      $(‘#example‘).dataTable( {    
  1181.          "aoColumnDefs": [    
  1182.      {    
  1183.          "mDataProp": null,    
  1184.          "sDefaultContent": "Edit",    
  1185.          "aTargets": [ -1 ]    
  1186.      }    
  1187.      ]    
  1188.      } );    
  1189.  } );    
  1190.      
  1191.      
  1192.  // Using aoColumns    
  1193.  $(document).ready(function() {    
  1194.      $(‘#example‘).dataTable( {    
  1195.          "aoColumns": [    
  1196.          null,    
  1197.          null,    
  1198.          null,    
  1199.          {    
  1200.              "mDataProp": null,    
  1201.          "sDefaultContent": "Edit"    
  1202.          }    
  1203.      ]    
  1204.      } );    
  1205.  } );    
  1206.      
  1207.  /*  
  1208.   * sName  
  1209.   * 默認值爲空字符串  
  1210.   * 該參數只有使用在服務器端處理的時候調用，在瞭解客戶端展現了哪些列的時候十分有用  
  1211.   * 而後與數據庫字段創建映射，當被定義時，若是服務器端返回的信息的順序不是指望的順序，也可使用名字去區分  
  1212.   * 使用這種方式的好處是：用戶在客戶端交換了列，你的服務器端代碼不用更新  
  1213.   */    
  1214.  // Using aoColumnDefs    
  1215.  $(document).ready(function() {    
  1216.      $(‘#example‘).dataTable( {    
  1217.          "aoColumnDefs": [    
  1218.      { "sName": "engine", "aTargets": [ 0 ] },    
  1219.          { "sName": "browser", "aTargets": [ 1 ] },    
  1220.          { "sName": "platform", "aTargets": [ 2 ] },    
  1221.          { "sName": "version", "aTargets": [ 3 ] },    
  1222.          { "sName": "grade", "aTargets": [ 4 ] }    
  1223.      ]    
  1224.      } );    
  1225.  } );    
  1226.      
  1227.      
  1228.  // Using aoColumns    
  1229.  $(document).ready(function() {    
  1230.      $(‘#example‘).dataTable( {    
  1231.          "aoColumns": [    
  1232.      { "sName": "engine" },    
  1233.          { "sName": "browser" },    
  1234.          { "sName": "platform" },    
  1235.          { "sName": "version" },    
  1236.          { "sName": "grade" }    
  1237.      ]    
  1238.      } );    
  1239.  } );    
  1240.      
  1241.  /*  
  1242.   * sSortDataType  
  1243.   * 默認值爲std  
  1244.   * 爲排序操做定義能夠用來在排序前讀取實時表格信息（更新內部緩存版本）的數據源的類型  
  1245.   * 容許排序事件發生在用戶可編輯的元素上，例如輸入框  
  1246.   */    
  1247.  // Using aoColumnDefs    
  1248.  $(document).ready(function() {    
  1249.      $(‘#example‘).dataTable( {    
  1250.          "aoColumnDefs": [    
  1251.      { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },    
  1252.          { "sType": "numeric", "aTargets": [ 3 ] },    
  1253.          { "sSortDataType": "dom-select", "aTargets": [ 4 ] },    
  1254.          { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }    
  1255.      ]    
  1256.      } );    
  1257.  } );    
  1258.      
  1259.      
  1260.  // Using aoColumns    
  1261.  $(document).ready(function() {    
  1262.      $(‘#example‘).dataTable( {    
  1263.          "aoColumns": [    
  1264.          null,    
  1265.          null,    
  1266.          { "sSortDataType": "dom-text" },    
  1267.          { "sSortDataType": "dom-text", "sType": "numeric" },    
  1268.          { "sSortDataType": "dom-select" },    
  1269.          { "sSortDataType": "dom-checkbox" }    
  1270.      ]    
  1271.      } );    
  1272.  } );    
  1273.      
  1274.  /*  
  1275.   * sTitle  
  1276.   * 默認值爲null,從TH標籤讀取  
  1277.   * 列名  
  1278.   */    
  1279.  // Using aoColumnDefs    
  1280.  $(document).ready(function() {    
  1281.      $(‘#example‘).dataTable( {    
  1282.          "aoColumnDefs": [    
  1283.      { "sTitle": "My column title", "aTargets": [ 0 ] }    
  1284.      ]    
  1285.      } );    
  1286.  } );    
  1287.      
  1288.      
  1289.  // Using aoColumns    
  1290.  $(document).ready(function() {    
  1291.      $(‘#example‘).dataTable( {    
  1292.          "aoColumns": [    
  1293.      { "sTitle": "My column title" },    
  1294.          null,    
  1295.          null,    
  1296.          null,    
  1297.          null    
  1298.          ]    
  1299.      } );    
  1300.  } );    
  1301.      
  1302.  /*  
  1303.   * sType  
  1304.   * 默認值爲null,從弱引用數據中自動判斷  
  1305.   * 容許你指定該列數據按什麼類型來排序，目前有四種類型（字符串，數字，日期和html（在排序前會自動除去HTML標記））可選  
  1306.   * 注意只有可以被Javascript的Date對象接受的格式化日期字符串纔會被看成日期類型接受，例如"Mar 26, 2008 5:03 PM"  
  1307.   * 默認是使用html類型，更多類型能夠經過插件添加  
  1308.   */    
  1309.  // Using aoColumnDefs    
  1310.  $(document).ready(function() {    
  1311.      $(‘#example‘).dataTable( {    
  1312.          "aoColumnDefs": [    
  1313.      { "sType": "html", "aTargets": [ 0 ] }    
  1314.      ]    
  1315.      } );    
  1316.  } );    
  1317.      
  1318.      
  1319.  // Using aoColumns    
  1320.  $(document).ready(function() {    
  1321.      $(‘#example‘).dataTable( {    
  1322.          "aoColumns": [    
  1323.      { "sType": "html" },    
  1324.          null,    
  1325.          null,    
  1326.          null,    
  1327.          null    
  1328.          ]    
  1329.      } );    
  1330.  } );    
  1331.      
  1332.  /*  
  1333.   * sWidth  
  1334.   * 默認值爲null,自動的  
  1335.   * 定義列的寬度，該參數能夠接受CSS定義（3em,20px等），DataTable對沒有經過該接口指定寬度的列使用靈活寬度  
  1336.   * 從而保證表格是可被讀的  
  1337.   */    
  1338.  // Using aoColumnDefs    
  1339.  $(document).ready(function() {    
  1340.      $(‘#example‘).dataTable( {    
  1341.          "aoColumnDefs": [    
  1342.      { "sWidth": "20%", "aTargets": [ 0 ] }    
  1343.      ]    
  1344.      } );    
  1345.  } );    
  1346.      
  1347.      
  1348.  // Using aoColumns    
  1349.  $(document).ready(function() {    
  1350.      $(‘#example‘).dataTable( {    
  1351.          "aoColumns": [    
  1352.      { "sWidth": "20%" },    
  1353.          null,    
  1354.          null,    
  1355.          null,    
  1356.          null    
  1357.          ]    
  1358.      } );    
  1359.  } );    
  1360.  /*------------------------------------------------ServerSide------------------------------------------------*/    
  1361.  /*  
  1362.   * bServerSide  
  1363.   * 默認值false  
  1364.   * 配置使用服務器端處理的DataTable，注意sAjaxSource參數必須指定，以便給DataTable一個獲取每行數據的數據源  
  1365.   */    
  1366.  $(document).ready( function () {    
  1367.      $(‘#example‘).dataTable( {    
  1368.          "bServerSide": true,    
  1369.          "sAjaxSource": "xhr.php"    
  1370.      } );    
  1371.  } );    
  1372.  /*  
  1373.   * fnServerData  
  1374.   * 無默認值  
  1375.   * 你可使用該參數重寫從服務器獲取數據的方法（$.getJSON）,從而使其更適合你的應用  
  1376.   * 例如你可使用POST方式提交，或者從Google Gears或者AIR數據庫獲取數據  
  1377.   */    
  1378.  // POST data to server    
  1379.  $(document).ready(function() {    
  1380.      $(‘#example‘).dataTable( {    
  1381.          "bProcessing": true,    
  1382.          "bServerSide": true,    
  1383.          "sAjaxSource": "xhr.php",    
  1384.          "fnServerData": function ( sSource, aoData, fnCallback ) {    
  1385.              $.ajax( {    
  1386.                  "dataType": ‘json‘,    
  1387.              "type": "POST",    
  1388.              "url": sSource,    
  1389.              "data": aoData,    
  1390.              "success": fnCallback    
  1391.              } );    
  1392.          }    
  1393.      } );    
  1394.  } );    
  1395.  /*  
  1396.   * fnServerParams  
  1397.   * 無默認值  
  1398.   * 用來在向服務器發送Ajax請求時發送額外的數據，例如自定義的過濾信息，該函數使向服務器發送額外參數變得簡單  
  1399.   * 傳遞進來的參數是DataTable創建的數據集合，你能夠根據須要添加或者修改該集合  
  1400.   */    
  1401.  $(document).ready(function() {    
  1402.      $(‘#example‘).dataTable( {    
  1403.          "bProcessing": true,    
  1404.          "bServerSide": true,    
  1405.          "sAjaxSource": "scripts/server_processing.php",    
  1406.          "fnServerParams": function ( aoData ) {    
  1407.              aoData.push( { "name": "more_data", "value": "my_value" } );    
  1408.          }    
  1409.      } );    
  1410.  } );    
  1411.  /*  
  1412.   * sAjaxDataProp  
  1413.   * 默認爲aaData  
  1414.   * 當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性做爲數據源  
  1415.   * 該選項容許變動數據源的名稱，你可使用JavaScript的點號對象表示法去訪問多級網狀數據源  
  1416.   */    
  1417.  // Get data from { "data": [...] }    
  1418.  $(document).ready(function() {    
  1419.      var oTable = $(‘#example‘).dataTable( {    
  1420.          "sAjaxSource": "sources/data.txt",    
  1421.          "sAjaxDataProp": "data"    
  1422.      } );    
  1423.  } );    
  1424.      
  1425.      
  1426.  // Get data from { "data": { "inner": [...] } }    
  1427.  $(document).ready(function() {    
  1428.      var oTable = $(‘#example‘).dataTable( {    
  1429.          "sAjaxSource": "sources/data.txt",    
  1430.          "sAjaxDataProp": "data.inner"    
  1431.      } );    
  1432.  } );    
  1433.  /*  
  1434.   * sAjaxSource  
  1435.   * 默認爲null  
  1436.   * 該參數用來向DataTable指定加載的外部數據源（若是想使用現有的數據，請使用aData）  
  1437.   * 能夠簡單的提供一個能夠用來得到數據url或者JSON對象，該對象必須包含aaData，做爲表格的數據源  
  1438.   */    
  1439.  $(document).ready(function(){    
  1440.    $(‘#example‘).dataTable( {    
  1441.      "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"    
  1442.    });    
  1443.  })    
  1444.  /*  
  1445.   * sServerMethod  
  1446.   * 默認值爲GET  
  1447.   * 設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式  
  1448.   */    
  1449.  $(document).ready(function(){    
  1450.      $(‘#example‘).dataTable({    
  1451.          "bServerSide": true,    
  1452.          "sAjaxSource": "scripts/post.php",    
  1453.          "sServerMethod": "POST"    
  1454.      });    
  1455.  });    



 

[javascript]  view plain  copy
 
    1. var docrTable = $('#docrevisontable').dataTable({    
    2.             "bProcessing" : true, //DataTables載入數據時，是否顯示‘進度’提示    
    3.             "bServerSide" : true, //是否啓動服務器端數據導入    
    4.             "bStateSave" : true, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回覆爲初始化狀態    
    5.             "bJQueryUI" : true, //是否使用 jQury的UI theme    
    6.             "sScrollY" : 450, //DataTables的高    
    7.             "sScrollX" : 820, //DataTables的寬    
    8.             "aLengthMenu" : [20, 40, 60], //更改顯示記錄數選項    
    9.             "iDisplayLength" : 40, //默認顯示的記錄數    
    10.             "bAutoWidth" : false, //是否自適應寬度    
    11.             //"bScrollInfinite" : false, //是否啓動初始化滾動條    
    12.             "bScrollCollapse" : true, //是否開啓DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變    
    13.             "bPaginate" : true, //是否顯示（應用）分頁器    
    14.             "bInfo" : true, //是否顯示頁腳信息，DataTables插件左下角顯示記錄數    
    15.             "sPaginationType" : "full_numbers", //詳細分頁組，能夠支持直接跳轉到某頁    
    16.             "bSort" : true, //是否啓動各個字段的排序功能    
    17.             "aaSorting" : [[1, "asc"]], //默認的排序方式，第2列，升序排列    
    18.             "bFilter" : true, //是否啓動過濾、搜索功能    
    19.                     "aoColumns" : [{    
    20.                         "mDataProp" : "USERID",    
    21.                         "sDefaultContent" : "", //此列默認值爲""，以防數據中沒有此值，DataTables加載數據的時候報錯    
    22.                         "bVisible" : false //此列不顯示    
    23.                     }, {    
    24.                         "mDataProp" : "USERNAME",    
    25.                         "sTitle" : "用戶名",    
    26.                         "sDefaultContent" : "",    
    27.                         "sClass" : "center"    
    28.                     }, {    
    29.                         "mDataProp" : "EMAIL",    
    30.                         "sTitle" : "電子郵箱",    
    31.                         "sDefaultContent" : "",    
    32.                         "sClass" : "center"    
    33.                     }, {    
    34.                         "mDataProp" : "MOBILE",    
    35.                         "sTitle" : "手機",    
    36.                         "sDefaultContent" : "",    
    37.                         "sClass" : "center"    
    38.                     }, {    
    39.                         "mDataProp" : "PHONE",    
    40.                         "sTitle" : "座機",    
    41.                         "sDefaultContent" : "",    
    42.                         "sClass" : "center"    
    43.                     }, {    
    44.                         "mDataProp" : "NAME",    
    45.                         "sTitle" : "姓名",    
    46.                         "sDefaultContent" : "",    
    47.                         "sClass" : "center"    
    48.                     }, {    
    49.                         "mDataProp" : "ISADMIN",    
    50.                         "sTitle" : "用戶權限",    
    51.                         "sDefaultContent" : "",    
    52.                         "sClass" : "center"    
    53.                     }],    
    54.                     "oLanguage": { //國際化配置    
    55.                 "sProcessing" : "正在獲取數據，請稍後...",      
    56.                 "sLengthMenu" : "顯示 _MENU_ 條",      
    57.                 "sZeroRecords" : "沒有您要搜索的內容",      
    58.                 "sInfo" : "從 _START_ 到  _END_ 條記錄 總記錄數爲 _TOTAL_ 條",      
    59.                 "sInfoEmpty" : "記錄數爲0",      
    60.                 "sInfoFiltered" : "(所有記錄數 _MAX_ 條)",      
    61.                 "sInfoPostFix" : "",      
    62.                 "sSearch" : "搜索",      
    63.                 "sUrl" : "",      
    64.                 "oPaginate": {      
    65.                     "sFirst" : "第一頁",      
    66.                     "sPrevious" : "上一頁",      
    67.                     "sNext" : "下一頁",      
    68.                     "sLast" : "最後一頁"      
    69.                 }    
    70.             },    
    71.                         
    72.                     "fnRowCallback" : function(nRow, aData, iDisplayIndex) {    
    73.                         /* 用來改寫用戶權限的 */    
    74.                         if (aData.ISADMIN == '1')    
    75.                             $('td:eq(5)', nRow).html('管理員');    
    76.                         if (aData.ISADMIN == '2')    
    77.                             $('td:eq(5)', nRow).html('資料下載');    
    78.                         if (aData.ISADMIN == '3')    
    79.                             $('td:eq(5)', nRow).html('通常用戶');    
    80.                             
    81.                         return nRow;    
    82.                     },    
    83.                         
    84.                     "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),    
    85.                         //服務器端，數據回調處理    
    86.                             "fnServerData" : function(sSource, aDataSet, fnCallback) {    
    87.                                 $.ajax({    
    88.                                     "dataType" : 'json',    
    89.                                     "type" : "POST",    
    90.                                     "url" : sSource,    
    91.                                     "data" : aDataSet,    
    92.                                     "success" : fnCallback    
    93.                                 });    
    94.                             }    
    95.                 });    
    96.                     
    97.                 $("#docrevisontable tbody").click(function(event) { //當點擊表格內某一條記錄的時候，會將此記錄的cId和cName寫入到隱藏域中    
    98.                     $(docrTable.fnSettings().aoData).each(function() {    
    99.                         $(this.nTr).removeClass('row_selected');    
    100.                     });    
    101.                     $(event.target.parentNode).addClass('row_selected');    
    102.                     var aData = docrTable.fnGetData(event.target.parentNode);    
    103.                         
    104.                     $("#userId").val(aData.USERID);    
    105.                     $("#userN").val(aData.USERNAME);    
    106.                 });    
    107.                     
    108.                 $('#docrevisontable_filter').html('<span>用戶管理列表');    
    109.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="建立"/>');    
    110.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="修改"/>');    
    111.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="刪除"/>');    
    112.                 $('#docrevisontable_filter').append('</span>');    
    113.         }    
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程