Javascript

ordering https://datatables.net/reference/option/ordering const table = $("#tableId").DataTable({ columns: [ { name: "link", data: "data_id", orderable: false, render: function(data, type, row, meta) { return '<a href="/{{request.blueprint}}/' + data + '/edit">Edit</a>'; } }, { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], ordering: true, }) デフォルト条件の設定 https://datatables....

Download時にSELECTも含めておく。 初期化時に $("#table").DataTable({ select: true }) これは1つだけ選択する場合。 multi にすると複数選択できるようになる。 serverSideを使用しているときはrowIdも設定する データをサーバーから取ってくるようにしている場合は主キーに該当する列をrowIdに設定する必要がある。 $("#table").DataTable({ select: true, rowId: function(row) { return row["key"]; } }) これがないとリロード時にselectがリセットされてしまう。 (https://datatables.net/extensions/select/examples/initialisation/server-side-processing.html) 選択されたすべてのデータを取得する cumulative selectedIds = $("#table_id").DataTable().select.cumulative(); rowId のリストを取得できる event イベントも使用可能で、 // アイテムが選択された時 table.on('select', function (e, dt, type, indexes) { console.log('Items to be selected are now: ', type, indexes); if (type == "row") { var data = dt.rows(indexes).data().toArray(); console.log(data) } }); // アイテムが選択解除された時 table.on('deselect', function (e, dt, type, indexes) { console....

例 const table = $("#tableId").DataTable({ columns: [ { name: "link", data: "data_id", orderable: false, render: function(data, type, row, meta) { return '<a href="/{{request.blueprint}}/' + data + '/edit">Edit</a>'; } }, { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], }) name 列の名前。普通は...

const table = $("#tableId").DataTable({ columns: [ { name: "link", data: "data_id", orderable: false, render: function(data, type, row, meta) { return '<a href="/{{request.blueprint}}/' + data + '/edit">Edit</a>'; } }, { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], paging: true, pageLength: 25, lengthMenu: [10, 25, 50, { label: 'All', value: -1 }] }) paging false の場合はすべてのデータがいっぺんに表示されるのでデータが多い場合は重くなってしまう。ただ、serverSide処理をしない限りは表示しようがしなかろうがすべてのデータを読み込むので重い場合はserverSideで処理すること。...

https://datatables.net/reference/event/?extn=autofill draw.dt https://datatables.net/reference/event/draw これはDataTablesが描画を完了したあとに実行される。 table.on('draw.dt', function() { var columns = table.columns().data(); var rows = table.rows().data(); }); functionは e と settings という引数を取れる。 settings というのは現在の DataTables の設定が読み込み専用の形ですべて登録されているオブジェクト（https://datatables.net/reference/type/DataTables.Settings）。 $.fn.dataTable.Api( selector ) で初期化(インスタンス化?)できる。 table.on('draw.dt', function(e, settings) { // initialize var api = new $.fn.dataTable.Api( settings ); const filteredData = api.rows( {search: "applied"} ).data().toArray(); if (settings._iRecordsTotal == filteredData.length) { console.log("フィルターはかかっていません"); } else { console.log("フィルターがかかっています"); } });

html <table id="tableId" class="cell-border"></table> JSONの配列を渡す data = [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, ] $("#tableId").DataTable({ "data": data, columns: [ { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "Position", }, { name: "salary", data: "salary", title: "Salary", }, { name: "start_date", data: "start_date", title: "Start date", }, { name: "office", data: "office", title: "Office", }, { name: "extn", data: "extn", title: "Extn", }, ], }) flask render_template を使う場合 flaskから受け取るなら、...

https://datatables.net/reference/option/serverSide 設定 初期化時に $("#tableId").DataTable({ serverSide: true, // <- これを追加 ajax: { url: "{{ url_for('.fetch_test') }}", type: "POST" // <- これを追加 }, columns: [ { name: "name", data: "name", title: "Name", }, { name: "position", data: "position", title: "position", }, { name: "salary", data: "salary", title: "salary", }, { name: "start_date", data: "start_date", title: "start_date", }, { name: "office", data: "office", title: "office", }, { name: "extn", data: "extn", title: "extn", }, ], }) serverSide: true を加える。 serverSide処理ではサーバーにデータテーブルのインフォメーションが送信されるから ajax の設定に type: "POST" も加える。...