Javascript

boxプロットを使って箱だけ非表示にするのも一手。 https://plotly.com/javascript/box-plots/ <div id="plot"></div> <script> const x = [0.5044528083813796, 0.49845872001357217, 0.4975016307388196, 0.5037510959564327, 0.4993219647633076, 0.50068155349606, 0.4977053870478837, 0.49718326250416833, 0.5007650843940975, 0.49773498865211385, 0.4951870445205525, 0.5046823671036484, 0.5011188386517081, 0.497133688616183, 0.49570519328218066, 0.49511830268928736, 0.4999495045661435, 0.5040788571123462, 0.49889019026034875, 0.4986065504776591, 0.5038025055164407, 0.49746132733779613, 0.4983757753323853, 0.4982843058261668, 0.4999374809403563, 0.5046458389327603, 0.5018365766216479, 0.5043385808190287, 0.5045928838954434, 0.5041046348766577] const y = [0.06439827631207162, 0.8441770694666793, 0.6813720832439308, 0.35060322424095514, 0.467048139705174, 0.620017287284704, 0.43537821196553583, 0.6101188972669156, 0.10748073863992014, 0.1533138955978588, 0.924650205508083, 0.8318203188022997, 0.41327132327091964, 0.32264726003151, 0.981510178301915, 0.5302127996786907, 0.18248359923337865, 0.4986798917953422, 0.9969050555031109, 0.3475448875799958, 0.4952059981669982, 0.5242979748824359, 0.39555263242199123, 0.07230858219753711, 0.7025945737378793, 0.6630819589030152, 0.5002874785404181, 0.34318587894609187, 0.8780836274864896, 0....

<div id="plot"></div> <script> const x = [0.20403972570131645, 0.4916764106252982, 0.77931309554928] const y = [0.16395561645008805, 0.4571736709682602, 0.7503917254864324] const z = [ [0.0, 0.0, 1.0], [1.0, 0.0, 2.0], [2.0, 2.0, 2.0] ] const trace = { type: "heatmap", x: x, y: y, z: z, colorscale: "Viridis" } const layout = { title: {text: "heatmap sample"}, xaxis: { title: { text: "X", font: {size: 24} }, tickfont: {size: 24}, }, yaxis: { title: { text: "Y", font: {size: 24} }, tickfont: {size: 24}, }, } Plotly....

https://misohena.jp/blog/2017-10-26-how-to-use-code-block-of-emacs-org-mode.html <div id="myplot" style="width:600px;height:400px;"></div> <script> Plotly.newPlot('myplot', [{ x: [1, 2, 3], y: [3, 1, 6], type: 'scatter' }]); </script>

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