datatablesデータテーブルの使い方

備考

バージョン

DataTables API

DataTablesには、ページ上のDataTableに関する情報を操作または取得するための広範なAPIが付属しています。

APIには3つの方法でアクセスできます。

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
 

最小限のデータテーブルを初期化する：

次のコードは、 tableid idを持つ表をDataTableにtableid し、DataTables APIインスタンスを戻します。

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

これを以下のコードと比較すると、テーブルがDataTableになりますが、DataTables APIインスタンスは返されません。

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

DataTables APIインスタンスでできることの詳細については、 DataTables APIドキュメントのセクションを参照してください。

インストール

index.html JavaScript とCSS ファイルが含まれている必要があります。これを行うには、次のパスで使用可能な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>
 

または、個々のローカルファイルをダウンロードして、自分でホストすることもできます。必要なJavaScript とCSS ファイルの包括的なパッケージを入手するには、必要な機能を選択して単一のパッケージに集約する（または個別のファイルを提供する）ことができるDataTables ダウンロードビルダーをご覧ください。ページの下部に表示されている順にこれらを含めてください。

DataTablesはjQuery に依存するので、 jquery.dataTables.js 前にjquery.dataTables.js ：

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

DataTableは、NPMからも入手できます。

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

バウワー

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

PDF - Download datatables for free