datatablesのselect API

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....

March 10, 2025 · K

datatablesのcolumnsオプション

例 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 列の名前。普通は...

March 10, 2025 · K

datatablesのpaging処理

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で処理すること。...

March 10, 2025 · K

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

ubuntuを起動しようとしたらbusyboxが出てきた

UPDATEをずっと放ったらかしにしてしまっているなと思って数カ月ぶりに再起動したら起動できず、 busyboxというコンソール画面が出てきて先に進まずの状態に。 その時はChatGPTに聞いて対処できたのだがここにメモを残しておく ルートパーティションを探す lsblk このコマンドは私の環境では見つからなかった blkid TYPE="ext4" の可能性が高い。 sda数値 のどれか。 ルートパーティションをマウントする mount /dev/sdaX /root 。失敗したらファイルシステムが壊れているかもしれない ファイルシステムをチェックする fsck -y /dev/sdaX chrootで本来のシステムに入る mount -t proc /proc /root/proc mount -t sysfs /sys /root/sys mount --rbind /dev /root/dev chroot /root これが必要なのかはわからない initramfs を更新する update-initramfs -u -k all update-grub すべてアンマウントして再起動 chrootから出る exit アンマウント umount /root/proc umount /root/sys umount /root/dev umount /root device is busy と出てきたら -l オプションをつけて試す。 再起動 reboot その他 https://qiita.com/takanemu/items/911f1943ecaf764e973d に書いてあるが、 fsck -y /dev/sda1 reboot だけで直るかもしれない。...

February 27, 2025 · K

Org Wikiを使ってみた

org-roamのメモを体系的に管理するのに使ってみたのだが、わざわざツールを1つ増やす必要があるのかという点に疑問を感じる。 GitHub - caiorss/org-wiki: Wiki for Emacs org-mode built on top of Emacs org-… 更新も8年前に終わっているし、廃れたツールなのかもしれない githubに書いてるとおりだが、これでインストールできる。 package-list-packagesにはない… (let ((url "https://raw.githubusercontent.com/caiorss/org-wiki/master/org-wiki.el")) (with-current-buffer (url-retrieve-synchronously url) (goto-char (point-min)) (re-search-forward "^$") (delete-region (point) (point-min)) (kill-whole-line) (package-install-from-buffer))) (require 'org-wiki) (setq org-wiki-location "~/org/wiki") 試しに2,3ページ作ってみたが、やってることはroamと変わらない感じがするのだよね。

February 26, 2025 · K

TransferTextは使うな

Accessでtxt形式のファイルをエクスポートするとき、 DoCmd.TransferText というコマンドを使うのだが、 数値データが有効数値2桁くらいで打ち切られてしまう。 0.00325 が 0.003 になってしまうのだ。 調べていると同じ不具合を報告しているところもちらほら見つかる(外部サイトとか)。 多分数値列を文字列型にしてから出力すれば良いのだろうが、 バッチ処理には向かないような気がするので試していない。 結局 DoCmd.TransferSpreadsheet を使ってエクセルで出力してから、 PythonでCSV変換して解決した。

February 24, 2025 · K

Plotly Jsでグラフを書く

js読み込み <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PLOTLY</title> <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script> </head> mainにグラフを書くためのスペースを作る <div id="plotly-container"> </div> 棒グラフを書いてみる https://plotly.com/javascript/bar-charts/ <script> plotData(); function plotData() { // Plot Area const plotDiv = document.getElementById('plotly-container'); const traces = []; // 年ごとの収支 const data = { "year": [2010, 2011, 2012, 2013], "income": [1000000, 2000000, 3000000, 4000000], "expense": [500000, 1000000, 2000000, 3000000] } data.balance = data.income.map((value, index) => value - data.expense[index]); // 棒グラフとして追加 traces.push({x: data.year, y: data....

February 16, 2025 · K