ソートできるデータテーブル (2) 外部ファイル

前回の記事へのアクセスが多いので第２弾 

これはキャプチャ

今回はJSONでデータテーブルを扱う。
個人的にJSONごにょごにょブームが来ているので、
datatable.jsでもっと簡単に管理しよう。


まずはじっくり向かい合ってください。

DataTables (table plug-in for jQuery) DataTables is a plug-in for the jQuery Javascript library.
http://www.datatables.net/
今回はDataTables examples - Ajax sourced data
https://datatables.net/examples/ajax/ 

サイトにわかりやすく全てまとめられていますが、<tbody>のデータ部分を外部のファイルにできます。サイトの説明に加えると表示設定もしたい場合は以下のような感じで。

$(document).ready(function() {
    $('#example').dataTable({
     
    "bFilter": false, //検索BOX
    "bPaginate": false, //ページ送り
    "bInfo": true, //データ数
    "bSort": true, //ソートさせる
   //ここからオプション設定
    "oLanguage": {
      "sLengthMenu": "表示件数: _MENU_ 件",
      "sSearch": "絞り込み:",
      "sEmptyTable": "対象がありませんでした。",
      "sLoadingRecords": "Loading...",
      "sInfo": "登録数 _TOTAL_ entries to show (_START_ to _END_)",
      "sZeroRecords": "対象がありませんでした。",
      "sInfoEmpty": "Showing 0 to 0 of 0 entries",
      "sInfoFiltered": "(filtered from _MAX_ total entries)",
      "oPaginate": {
        "sFirst": "First",
        "sPrevious": "前のページ",
        "sNext": "次のページ",
        "sLast": "Last"       
      }
    },
    //ここまでオプション

    //ファイルの指定
      "ajax": {
            "url": "xxx.json",
            "dataSrc": "data"
        },
        "columns": [
            { "data": "id" },
            { "data": "title" },
            { "data": "type" },
        ]
  });     
});

設定自体はサイトの説明を見ればなんとかなると思います。
bootstrapのCSSもありますのでデザインの手間も省けます。

わざわざデータファイルを作るの？

SublimeでJSON Convertすれば労せずCSVからJSON形式にしてくれる。

• ソートできるデータテーブル dataTables 2020