dataTables使用整理(一)

初次使用dataTables，對一些用到的屬性及遇到的問題作一個簡要的記錄

參考資料：

http://blog.csdn.net/mickey_miki/article/details/8240477/

http://q.cnblogs.com/q/45111/

http://www.mamicode.com/info-detail-621566.html

http://blog.csdn.net/ly210501076/article/details/46817375/

 1、初次使用遇到的屬性 ：

屬性	取值侷限	說明
bAutoWidth	true or false ，default true	是否主動策畫表格各列寬度[是否啓用自動適應列寬]
bJQueryUI	true or false， default false	是否應用jquery ui themeroller的風格
sScrollY	"disabled" or "200px"相似的字符串	是否開啓垂直遷移轉變，以及指定遷移轉變區域大小
sScrollX	"disabled" or "100％"相似的字符串	是否開啓程度遷移轉變，以及指定遷移轉變區域大小
bStateSave	true or false， default false	開關，是否打開客戶端情況記錄功能。這個數據是記錄 在cookies中的， 打開了這個記錄後，即便刷新一次頁面，   或從頭打開瀏覽器，以前的情況都是保存下來的
bDeferRender	true or false， default false	用於襯着的一個參數
bProcessing	true or false， defualt false	開關，以指定當正在處理懲罰數據的時辰， 是否顯示「正在處理懲罰」這個提示信息
bServerSide	true or false， defualt false	是否啓用服務器處理數據源，必須使用sAjaxSource指明數據源位置
sAjaxSource	URL字符串，default null	指定要從哪一個URL獲取數據
fnServerParams	無默認值	用來在向服務器發送Ajax請求時發送額外的數據
bSort	true or false， default true	開關，是否讓各列具備按列排序功能【單獨列，在每列設置中使用bSortable指定】
bInfo	true or false ， default true	開關，是否顯示錶格的一些信息【是否顯示頁腳信息】
bPaginate	true or false， default true	開關，是否顯示（應用）分頁器
bRetrieve	true or false， default false	用於指明當履行dataTable綁按時，是否返回DataTable對象
bDestroy	true or false， default false	用於當要在同一個元素上履行新的dataTable綁按時， 將以前的那個數據對象清除掉，換以新的對象設置
fnServerData	——	以使用該參數重寫從服務器獲取數據的方法 【詳見參考資料】
oLanguage	——	自定義語言設置
bVisible	true or false， default true	false 隱藏 true不隱藏
aoColumnDefs	——	隱藏某些列等 對列的一系列處理，與aoColumns的區別見：http://www.07net01.com/zhishi/178827.html
aoColumns	——	排序控制等 對列的一系列處理
sPaginationType	"full_numbers" or"two_button"	用於指定分頁器風格default ""two_button""
bScrollCollapse	true or false， default false	指定恰當的時辰縮起遷移轉變視圖【是否開啓內置滾動條，而且顯示全部數據】
aaSorting	array array[int，string]	指定按多列數據排序的根據如[]， [[0，"asc"]， [0，"desc"]]
bSortClasses	true or false， default true	開關，指定當當前列在排序時，是否增長classes "sorting_1"， "sorting_2"and "sorting_3"， 打開後，在處理懲罰大數據時，機能有所喪失

2、補充說明:

 /*
     *  默認爲true
     *  是否自動計算列寬，計算列寬會花費一些時間，若是列寬經過aoColumns傳遞，能夠關閉該屬性做爲優化
     *  建議設爲false
     */
    "bAutoWidth":true,
 /*
     * 默認爲fasle
     * 是否開啓jQuery UI ThemeRoller支持，須要一些ThemeRoller使用的標記，這些標記有些與DataTable傳統使用的有輕微的差別，有些是額外附加的
     */
    "bJQueryUI":false,

/*
     * 默認爲空字符串，即：無效
     * 是否開啓垂直滾動，垂直滾動會驅使DataTable設置爲給定的長度，任何溢出到當前視圖以外的數據能夠經過垂直滾動進行察看
     * 當在小範圍區域中顯示大量數據的時候，能夠在分頁和垂直滾動中選擇一種方式，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）
     */
    "sScrollY":"100%",
/*
     * 默認爲空字符串，即：無效
     * 是否開啓水平滾動，當一個表格過於寬以致於沒法放入一個佈局的時候，或者表格有太多列的時候，你能夠開啓該選項
     * 從而在一個可橫向滾動的視圖裏面展現表格，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）
     */
   "sScrollX":"100%",

  /*
     * 默認爲false
     * 是否開啓狀態保存，當選項開啓的時候會使用一個cookie保存表格展現的信息的狀態，例如分頁信息，展現長度，過濾和排序等
     * 這樣當終端用戶從新加載這個頁面的時候可使用之前的設置
     * 簡單來講：是否開啓cookies保存當前狀態信息
     */
    "bStateSave":false,
/*
     *  默認爲false  
     *  是否延遲渲染，當用Ajax或者js方式加載數據時開啓延遲渲染會帶來很大的速度提高
     *  當該屬性設置爲true時，表格每一行新增的元素只有在須要被畫出來時纔會被DataTable建立出來
     * 簡單來講: 是否啓用延遲加載：當你使用AJAX數據源時，能夠提高速度。
     */
    "bDeferRender":false,

 /*
     * 默認爲false
     * 當表格在處理的時候（好比排序操做）是否顯示「處理中...」
     * 當表格的數據中的數據過多以致於對其中的記錄進行排序時會消耗足以被察覺的時間的時候，該選項會有些用處
     * 簡單來講：是否啓用進度顯示，進度條等等，對處理大量數據頗有用處。
     */
    "bProcessing":false, 

    /*
     * 默認爲false
     * 配置DataTable使用服務器端處理，注意，sAjaxSource參數必須指定，以便給DataTable一個爲每一行獲取數據的數據源
     * 簡單來講：是否啓用服務器處理數據源，必須sAjaxSource指明數據源位置
     */
    "bServerSide":false,



 /*
  * sAjaxSource
  * 默認爲null
  * 該參數用來向DataTable指定加載的外部數據源（若是想使用現有的數據，請使用aData）
  * 能夠簡單的提供一個能夠用來得到數據url或者JSON對象，該對象必須包含aaData，做爲表格的數據源
  */
"sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"

 /*
  * 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 
 }

  /*
     * 默認爲true
     * 是否顯示錶格信息，是指當前頁面上顯示的數據的信息，若是有過濾操做執行，也會顯示過濾操做的信息
     * 簡單來講： 是否顯示頁腳信息
     */
    "bInfo":true,

 
 /*
     * 默認爲true
     * 是否開啓列排序，對單獨列的設置在每一列的bSortable選項中指定
     * 即:是否開啓列排序功能，若是想禁用某一列排序，能夠在每列設置使用bSortable參數
     */
    "bSort":true,
 

    /*
     * 默認爲true
     * 是否在當前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class，當該列被排序的時候，能夠切換其背景顏色
     * 該選項做爲一個來回切換的屬性會增長執行時間（當class被移除和添加的時候）
     * 當對大數據集進行排序的時候你或許但願關閉該選項
     *建議：若是處理大量數據時，將其關閉關閉
     */
    "bSortClasses":true,

/*
  * bScrollCollapse
  * 默認爲false
  * 當垂直滾動被容許的時候，DataTable會強制表格視圖在任什麼時候候都是給定的高度（對佈局有利）
  * 不過，當把數據集過濾到十分小的時候看起來會很古怪，並且頁腳會留在最下面
  * 當結果集的高度比給定的高度小時該參數會使表格高度自適應
  * 簡單來講：是否開啓內置滾動條，而且顯示全部數據;是否開啓DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sScrollY": "200",
     "bScrollCollapse": true
   });
 });



/*
  * 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" } );
         }
     });
 });


 /*
  * sPaginationType
  * 默認爲two_button
  * DataTable內建了兩種交互式分頁策略，兩個按鈕和全頁數，展示給終端用戶不一樣的控制方式
  * 能夠經過API增長策略
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "sPaginationType": "full_numbers"
     });
 })

 /*
  * fnInitComplete
  * 無默認值
  * 當表格被初始化後調用該函數，一般DataTable會被持續初始化，並不須要該函數
  * 但是，當使用異步的XmlHttpRequest從外部得到語言信息時，初始化並非持續的
  */
 $(document).ready( function(){
     $(‘#example‘).dataTable({
         "fnInitComplete": function(oSettings, json) {
             alert( ‘DataTables has finished its initialisation.‘ );
         }
     });
 })