新規投稿
フォローする

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

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

サンプル

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


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

コード

HTML

<table id="myTable"></table>

JavaScript

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

※サンプルコードでは、kintone Utility Library for JavaScriptを利用しております。

1

3件のコメント

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
ログインしてコメントを残してください。