DataTablesは、手軽に多機能なテーブルを作成できるjQueryプラグインです。 キー入力で反応する絞り込み機能等を備えているので、大量のデータを扱うのに便利です。 DataTables及びjQueryはCybozu CDNにてサポートされているので、ご利用ください。
サンプル
DataTablesを用いてカスタマイズビューを作成しました。
※サンプルに用いたデータはなんちゃって個人情報にて作成したものです。実在の人物とは関係ありません。
コード
HTML（一覧名: DataTables）
\<tableid="myTable"\>\</table\>
JavaScript
下記を順に読みます．
・sample.js
(function () {
"use strict";
kintone.events.on(['app.record.index.show'], function (event) {
if (event.viewName !== 'DataTables') return;
// 表示するフィールドをフィールドコードで指定
var columns = ['名前', 'ふりがな', 'アドレス', '性別', '年齢', '誕生日', '婚姻', '携帯', 'カレーの食べ方',];
kintoneUtility.rest.getAllRecordsByQuery({
app: kintone.app.getId()
}).then(function (response) {
$('#myTable').DataTable({
data: response.records.map(function (record) {
return columns.reduce(function (data, column) {
data[column] = record[column].value;
return data;
}, {
レコード番号: '<a href="show#record=' + record.レコード番号.value + '">' + record.レコード番号.value + '</a>'
});
}),
columns: ['レコード番号'].concat(columns).map(function (column) {
return {
title: column,
data: column
};
})
});
});
});
})();
CSS
下記を読みます．
※2020/07/15修正．
ゲストスペースで同じように機能させるにはどのようにすれば良いものでしょうか？
なぜかゲストスペースではできないのです。
RYOSUKE様
お世話になっております。
cstapの江田です。
ゲストスペース内で利用する場合は、kintoneUtility.rest.getAllRecordsByQuery()のパラメータisGuestをtrueにしてください。https://github.com/kintone/kintoneUtility/blob/master/guides/rest_doc.md#getAllRecordsByQuery
...
kintoneUtility.rest.getAllRecordsByQuery({app:kintone.app.getId()}).then(function(response){
...
↓
...
kintoneUtility.rest.getAllRecordsByQuery({app:kintone.app.getId(),
isGuest: true}).then(function(response){
...
全くの初心者です。このコードをJSeditを使い反映させるさせるにはどうしたらいいですか？
上のjavascriptのコードのコピーだけではだめでしょうか？
小田研人様
お世話になっております．
読み込みが必要なライブラリを追記しました．
「アプリの設定 > JavaScript / CSSでカスタマイズ」でライブラリを読み込んでください．
JSEditで作成したコードが既に読み込まれていると思うので，ドラッグアンドドロップでライブラリが先に読み込まれるよう設定してください．
https://jp.cybozu.help/k/ja/user/app_settings/js_customize.html
江田篤史様
こんにちは、とても素晴らし機能だと思いました。
URL等を手順通りに読み込んだのですが上手く反映されませんでした。
JSにてフィールドコード以外に書き換えの必要な箇所があるのでしょうか、またJS以外の箇所にて問題があるのでしょうか。
ご教示いただけると幸いです。
(function () {
"use strict";
kintone.events.on(['app.record.index.show'], function (event) {
if (event.viewName !== 'DataTables') return;
// 表示するフィールドをフィールドコードで指定
var columns = ['階・号室', 'テナント名', '入金日', '入金情報', '入金金額',];///書き換え箇所
kintoneUtility.rest.getAllRecordsByQuery({
app: kintone.app.getId()
}).then(function (response) {
$('#myTable').DataTable({
data: response.records.map(function (record) {
return columns.reduce(function (data, column) {
data[column] = record[column].value;
return data;
}, {
レコード番号: '<a href="show#record=' + record.レコード番号.value + '">' + record.レコード番号.value + '</a>'
});
}),
columns: ['レコード番号'].concat(columns).map(function (column) {
return {
title: column,
data: column
};
})
});
});
});
})();
何の解決策も提示できませんが、
こちらが上手くいかない理由はUSL指定で３つめに読み込んでいる
https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
のリンクが切れているから、だと思います（2022/6/16 AM時点）。
これが復活しない限りは、おそらくこのプラグインは使えないですね・・・。自分も残念です。
らいと様
お世話になっております。返信遅くなりすみません。
ダウンロード可能なサイト及び乗り換えのリンクのご提示ありがとうございます。
二つ目のリンクを参考にコードの書き換えを行っていこうと思います。
解決対策のご教授ありがとうございました。