datatablesのイベント処理

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("フィルターがかかっています"); } });

March 9, 2025 · K

datatablesにデータを渡す

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から受け取るなら、...

March 9, 2025 · K

datatablesのserverSide処理

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" も加える。...

March 9, 2025 · K