DataTablesを使って多機能な一覧画面を作ろう！

江田篤史

2018年06月27日 09:52

DataTablesは、手軽に多機能なテーブルを作成できるjQueryプラグインです。キー入力で反応する絞り込み機能等を備えているので、大量のデータを扱うのに便利です。 DataTables及びjQueryはCybozu CDNにてサポートされているので、ご利用ください。

サンプル

DataTablesを用いてカスタマイズビューを作成しました。

※サンプルに用いたデータはなんちゃって個人情報にて作成したものです。実在の人物とは関係ありません。

コード

HTML（一覧名: DataTables）

<table id="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

下記を読みます．

https://js.cybozu.com/datatables/v1.10.20/css/jquery.dataTables.min.css

※2020/07/15修正．

11件のコメント

RYOSUKE 2018年08月24日 10:00

ゲストスペースで同じように機能させるにはどのようにすれば良いものでしょうか？

なぜかゲストスペースではできないのです。

江田篤史 2018年08月27日 02:12

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

RYOSUKE 2018年08月27日 09:58

cstapの江田さまへ

ありがとうございましたm( _ )m

小田研人 2020年07月10日 10:55

全くの初心者です。このコードをJSeditを使い反映させるさせるにはどうしたらいいですか？

上のjavascriptのコードのコピーだけではだめでしょうか？

江田篤史 2020年07月15日 08:36

小田研人様

お世話になっております．

読み込みが必要なライブラリを追記しました．

「アプリの設定 > JavaScript / CSSでカスタマイズ」でライブラリを読み込んでください．
JSEditで作成したコードが既に読み込まれていると思うので，ドラッグアンドドロップでライブラリが先に読み込まれるよう設定してください．

https://jp.cybozu.help/k/ja/user/app_settings/js_customize.html

SAI 2021年02月21日 13:19

素晴らしい機能だと思います。

初心者で、完コピーしてもうまくいかなかった-_-

nekoko 2022年05月10日 07:48

江田篤史様

こんにちは、とても素晴らし機能だと思いました。

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
          };
        })
      });
    });
  });
})();