新規投稿
フォローする

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

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

下記を読みます.

※2020/07/15修正.

1

6件のコメント

Avatar
RYOSUKE

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

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

0
Avatar
江田篤史

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){
...
0
Avatar
RYOSUKE

cstapの江田さまへ

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

0
Avatar
小田研人

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

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

0
Avatar
江田篤史

小田研人様

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

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

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

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

0
Avatar
SAI

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

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

0
サインインしてコメントを残してください。