datatables數據表入門


備註

主要特點

  • 可變長度分頁
  • 即時過濾
  • 具有數據類型檢測的多列排序
  • 智能處理色譜柱寬度
  • 顯示幾乎所有數據源的數據
  • DOM,JavaScript數組,Ajax文件和服務器端處理
  • 表視口的滾動選項
  • 完全國際化
  • jQuery UI ThemeRoller支持
  • 各種各樣的插件
  • 免費

資源

版本

發行說明發布日期
1.9及更早版本(遺產) https://datatables.net/forums/discussion/8332/datatables-1-9-0-released 2014年2月1日
1.10及以後 https://datatables.net/new/1.10 2015年8月12日

DataTables API

DataTables附帶了一個廣泛的API,用於操作或獲取有關頁面上DataTable的信息。

可以通過3種方式訪問API:

var table = $('#tableid').DataTable(); //DataTable() returns an API instance immediately
var table = $('#tableid').dataTable().api(); //dataTable() returns a jQuery object
var table = new $.fn.dataTable.Api('#tableid');
 

設置對像後,可以調用該對像上的任何API函數。

var columns = table.columns();
 

更複雜的示例是表中添加一些行

table.rows.add( [ {
        "name":       "John Doe",
        "employee_id":   "15135",
        "department":     "development",
    }, {
        "name":       "Jane Smith",
        "employee_id":   "57432",
        "department":     "quality assurance",
    } ] )
    .draw();
 

可以在此處找到API函數的完整列表。

功能啟用/禁用(DataTables選項)

DataTables能夠啟用或禁用其許多功能,例如分頁或搜索。要選擇這些選項,只需在初始化中選擇它們:

$(document).ready(function() {
    $('#tableid').DataTable( {
        "paging":   false, //Turn off paging, all records on one page
        "ordering": false, //Turn off ordering of records
        "info":     false  //Turn off table information
    } );
} );
 

請注意,選項名稱周圍的引號是可選的:

paging: false,
ordering: false,
info: false
 

也完全有效。

可以在此處找到完整的選項列表,以及每個選項的使用說明。

初始化表時,這些選項只能設置一次。但是,您可以通過添加以下內容來解決此限制:

 destroy: true
 

初始化最小的DataTables:

下面的代碼將使用tableid 的id將表轉換為DataTable,並返回DataTables API實例:

$(document).ready(function() {
    $('#tableid').DataTable();
});
 

將此與下面的代碼進行比較,後者將表格轉換為DataTable,但不會返回DataTables API實例:

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

有關可以使用DataTables API實例執行的操作的更多詳細信息,請參閱DataTables API文檔部分。

安裝

需要在index.html 包含JavaScriptCSS 文件。您可以使用以下路徑中可用的CDN文件來執行此操作:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
 

或者通過下載單個本地文件並自己託管它們。要獲得所需的JavaScriptCSS 文件的綜合包,請訪問DataTables 下載構建器 ,該構建器允許您選擇所需的功能並將它們壓縮到單個包中(或提供單個文件)。按照頁面底部顯示的順序包含這些內容。

DataTables依賴於jQuery ,所以在jquery.dataTables.js 之前包含它:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 

DataTables也可通過NPM獲得

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling
 

和鮑爾

bower install --save datatables.net
bower install --save datatables.net-dt