dataTables.js知識

風靈使發表於2018-12-31
JS

準備工作：

瞭解DataTables

官方網站：http://www.datatables.net/

簡介：DataTables是一個jQuery的表格外掛。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支援任何HTML表格。

主要特點：

自動分頁處理

即時表格資料過濾

資料排序以及資料型別自動檢測

自動處理列寬度

可通過CSS定製樣式

支援隱藏列

易用

可擴充套件性和靈活性

國際化

動態建立表格

免費的

引數初始化：

引入檔案：

@import "css/demo_page.css";

@import "css/demo_table.css";

$(document).ready( function () {
  $('#example').dataTable( );
} );

body內資料表格必備結構：thead tbody tboot ;

第一列 瀏覽器 系統 版本 CSS 支援等級
Trident Internet Explorer 4.0 Win 95+
Trident Internet Explorer 5.0 Win 95+
Trident Internet Explorer 5.5 Win 95+
第一列 瀏覽器 系統 版本 CSS 支援等級

基本引數設定：

$(document).ready(function(){  

$('#example').dataTable({   

  "sScrollX": "100%",   //表格的寬度  

  "sScrollXInner": "110%",   //表格的內容寬度    

  "bScrollCollapse": true,  //當顯示的資料不足以支撐表格的預設的高度時，依然顯示縱向的滾動條。(預設是false)      

  "bPaginate": true,  //是否顯示分頁    

  "bLengthChange": true,  //每頁顯示的記錄數    

  "bFilter": true, //搜尋欄    

  "bSort": true, //是否支援排序功能    

  "bInfo": true, //顯示錶格資訊    

  "bAutoWidth": false,  //自適應寬度    

  "aaSorting": [[1, "asc"]],  //給列表排序 ，第一個參數列示陣列 (由0開始)。1 表示Browser列。第二個引數為 desc或是asc    

  "aoColumns": [    

      null,    

      null,    

      {     

          "bVisible": true, //不可見    

          "bSearchable": false, //參與搜尋    

      },   

      null,    

      null   

  ], //列設定，表有幾列，陣列就有幾項    

  "bStateSave": true, //儲存狀態到cookie *************** 很重要 ， 當搜尋的時候頁面一重新整理會導致搜尋的消失。使用這個屬性就可避免了    

  "sPaginationType": "full_numbers", //分頁，一共兩種樣式，full_numbers和two_button(預設)    

  "oLanguage": {    

      "sLengthMenu": "每頁顯示 _MENU_ 條記錄",    

      "sZeroRecords": "對不起，查詢不到任何相關資料",    

      "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",    

      "sInfoEmtpy": "找不到相關資料",    

      "sInfoFiltered": "資料表中共為 _MAX_ 條記錄)",    

      "sProcessing": "正在載入中...",    

      "sSearch": "搜尋",    

      "sUrl": "", //多語言配置檔案，可將oLanguage的設定放在一個txt檔案中，例：Javascript/datatable/dtCH.txt    

      "oPaginate": {    

          "sFirst":    "第一頁",    

          "sPrevious": " 上一頁 ",    

          "sNext":     " 下一頁 ",    

          "sLast":     " 最後一頁 "   

      }    

  

  }, //多語言配置    

  "bJQueryUI": false, //可以新增 jqury的ui theme  需要新增css   

  "aLengthMenu": [[10, 25, 50, -1, 0], ["每頁10條", "每頁25條", "每頁50條", "顯示所有資料", "不顯示資料"]]  //設定每頁顯示記錄的下拉選單    

    });  

});

分組例項解釋一些：

bAutoWidth

是否啟用自動適應列寬

預設值：True

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bAutoWidth": false
  } );
} );

bDeferRender

是否啟用延遲載入：當你使用AJAX資料來源時，可以提升速度。

預設值：False

示例程式碼：

$(document).ready(function() {
  var oTable = $('#example').dataTable( {
    "sAjaxSource": "sources/arrays.txt",
    "bDeferRender": true
  } );
} );

bFilter

是否啟用內建搜尋功能：可以跨列搜尋。

預設值：True

示例程式碼：

 $(document).ready( function () {
  $('#example').dataTable( {
    "bFilter": false
  } );
} );

bInfo
是否顯示錶格相關資訊：例如翻頁資訊等。

預設值：True

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bInfo": false
  } );
} );

bJQueryUI

是否啟用 jQuery UI 皮膚外掛支援

預設值:False

示例程式碼：

$(document).ready( function() {
  $('#example').dataTable( {
    "bJQueryUI": true
  } );
} );

bLengthChange

是否允許使用者，在下拉選單自定義選擇分頁大小(10, 25, 50 and 100),需要分頁支援

預設值：True

示例程式碼：

 $(document).ready( function () {
  $('#example').dataTable( {
    "bLengthChange": false
  } );
} );

bPaginate

是否開啟分頁

預設值：Ture

示例程式碼:

 $(document).ready( function () { 
  $('#example').dataTable( {
    "bPaginate": false
  } );
} );

bProcessing

是否啟用進度顯示，進度條等等，對處理大量資料很有用處。

預設值：false

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bProcessing": true
  } );
} );

bScrollInfinite

是否開啟內建滾動條，並且顯示所有資料

預設值：fasle

示例程式碼：

$(document).ready(function() {
  $('#example').dataTable( {
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "sScrollY": "200px"
  } );
} );

bServerSide

是否啟用伺服器處理資料來源，必須sAjaxSource指明資料來源位置

預設值：False

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "xhr.php"
  } );
} );

bSort

是否開啟列排序功能，如果想禁用某一列排序，可以在每列設定使用bSortable引數

預設值：True

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bSort": false
  } );
} );

bSortClasses

不清楚是做什麼用的，如果處理大量資料時，必須關閉（有人知道嗎？）

預設值：False

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bSortClasses": false
  } );
} );

bStateSave

是否開啟cookies儲存當前狀態資訊

預設值：false

示例程式碼：

$(document).ready( function () {
  $('#example').dataTable( {
    "bStateSave": true
  } );
} );

sScrollX

是否開啟水平滾動條

預設值：空 （字串型別）

示例程式碼：

$(document).ready(function() {
  $('#example').dataTable( {
    "sScrollX": "100%",
    "bScrollCollapse": true
  } );
} );

sScrollY

是否開啟垂直滾動條，滾動條大小受限於Datatable的高度大小

預設值：空 （字串型別）

示例程式碼：

$(document).ready(function() {
  $('#example').dataTable( {
    "sScrollY": "200px",
    "bPaginate": false
  } );
} );

分頁

bPaginite:true;是否啟用分頁功能

sPaginationType:two_button 或者full_numbers 分頁風格

sFirst:告訴他第一頁怎麼寫

sLast:告訴他最後一頁怎麼寫

sNext:告訴他下一頁怎麼寫

sPrevious:告訴他上一頁怎麼寫

語言

"sInfo":"共_TOTAL_頁 第_START_到_END_頁",

"sEmptyTable":"沒有資料"

"sInfoFiltered":"從_MAX_條記錄中搜尋",

"sInfoPostFix": "      底邊欄的靜態資訊",

"sInfoThousands": "我靠",//格式化資訊用的

"sLengthMenu":"顯示條資訊"

"sSearch":"搜尋"

基本的命令

aaSorting:引數是個陣列  [[],[]]單獨定義每一列的排序方式

aaSortingFixed:鎖定某一列的排序方式  使用者不能改變

iDisplayLength:規定每一頁的顯示數目

aLengthMenu:[[兩個陣列要一樣],[真正顯示的是這個陣列中的內容 最後一個是”all”]]

bAutoWidth:自動調整列寬

bDestroy:好比重新部署

bFilter:是否啟用過濾器

bInfo:是否啟用底邊資訊欄

bLengthChange:就是是否啟用上面那個可以方便顯示幾頁的下拉框

bProcessing:表格在處理資料時是否要顯示資訊

sProcessing:定義表格在處理資料時要顯示的資訊

bScrollAutoCss:是否允許顯示滾動條

sScrollY:表格的高度 不夠的話用滾動條

bScrollCollapse:當設定sScrolly時  如果資料沒那麼高  表格是否自適應高度

bScrollInfinite:允許無限滾動  和google的圖片搜尋功能一樣  一滾到最後就自動重新整理

sScrollXInner:是個百分比 實際就是表格的寬度一樣

sScrollX:也是百分比  實際就是水平方向滾動條件

bSort:是否啟用排序功能

相關文章