【音ツツ】DataTablesのオプション設定【音ゲーツールを作ろう】#005

[2024/06/13]

前回に引き続き今回もDataTablesの使い方です。

DataTables オプション

前回、DataTableを使うと簡単にツールっぽくなると説明しました。

詳しくは前回の記事参照

【音ツツ】DataTablesというライブラリ【音ゲーツールを作ろう】#004

前回は既存の表（TABLE）にDataTablesを反映させただけでした。今回は細かい設定を行います。

new DataTable('#table-02', {
// options
});

この//optionsの場所にオプションを書くわけですが、このオプションめっちゃたくさんあります。

Options (DataTables)

しかも英語でしか説明がないので、私もよくわからないものが多くあります。

データを表示する

ツールにする上で重要なオプションについて説明です。

【音ツツ】 #005用コード

実行された結果は全く一緒です。

ですが、ソースを見るとTABLEタグは「<table id="table-01"></table>」となっていて、中身は何も入っていません。空のTABLEを定義しているだけです。

見出し行の設定と、表示するデータはオプションで指定しています。

new DataTable('#table-01', {
  'columns': [
    { 'title': '曲名', 'data': 'music' },
    { 'title': 'アーティスト名', 'data': 'artist'},
    { 'title': 'SPB', 'data': 'spb'},
    { 'title': 'SPN', 'data': 'spn'},
    { 'title': 'SPH', 'data': 'sph'},
    { 'title': 'SPA', 'data': 'spa'},
    { 'title': 'SPL', 'data': 'spl'},
  ],
  'columnDefs': [
    { 'targets' : [ 2, 3, 4, 5, 6 ], 'asSorting' : [ 'desc', 'asc' ]},
  ],
  'data': [
    { 'music': '5.1.1.', 'artist': 'dj nagureo', 'spb': '', 'spn': '2', 'sph': '6', 'spa': '10', 'spl': ''},
    { 'music': '冥.', 'artist': 'Amuro vs Killer', 'spb': '3', 'spn': '5', 'sph': '10', 'spa': '12', 'spl': ''},
  ]
});