主な機能
リソース
バージョン | リリースノート | 発売日 |
---|---|---|
1.9以前(旧式) | https://datatables.net/forums/discussion/8332/datatables-1-9-0-released | 2014-02-01 |
1.10以降 | https://datatables.net/new/1.10 | 2015-08-12 |
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には、ページングや検索などの多数の機能を有効または無効にする機能があります。これらのオプションを選択するには、初期化でそれらのオプションを選択するだけです。
$(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