# テーブルの表示件数について

**URL:** <https://community.cybozu.dev/t/topic/3294>\
**Category:** kintone 開発相談\
**Created:** [2018 年 8 月 16 日午前 2:31 UTC](https://community.cybozu.dev/t/topic/3294 "2018-08-16T02:31:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account572](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account572](https://community.cybozu.dev/u/Legacy_Account572)\
**Post date:** [2018 年 8 月 16 日午前 2:31 UTC](https://community.cybozu.dev/t/topic/3294/1 "2018-08-16T02:31:13Z")

</div>

質問です。

Kintoneフィールド内に設置したテーブルで

行を増やし続けたレコードが散見されるようになり

デフォルトを直近の３件とか５件とかで表示されるようにしたいと思いますが

何か良い方法はあるでしょうか？

（標準は５件表示だが ボタンを押したら全テーブルが表示される

次の５件が表示される 等）

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 8 月 16 日午前 4:47 UTC](https://community.cybozu.dev/t/topic/3294/2 "2018-08-16T04:47:19Z")

</div>

株式会社ワークハピネス様

お世話になっております。 cstapの江田と申します。

レコード詳細画面での実装ということでしょうか？  
もしそのようでしたら、下記のCSSとJavaScriptコードによって実装できると思います。  
※ただし、kintoneの仕様変更によりDOMのclass名などが変更された場合には動作しなくなる可能性があります。

CSS

```
.subtable-gaia:not(.edit-subtable-gaia) tbody tr{
display: none;
}
.subtable-gaia:not(.edit-subtable-gaia) tr:nth-last-child(-n+5){
display: table-row;
}
.subtable-gaia.all:not(.edit-subtable-gaia) tbody tr{
display: table-row;
}

```

JavaScript

```
(function(){"use strict";kintone.events.on(['app.record.detail.show',],function(event){[].forEach.call(document.getElementsByClassName('subtable-gaia'),function(element){varbutton=document.createElement('a');button.innerHTML='全件表示';button.addEventListener('click',function(){element.classList.add('all');button.style.display='none';});element.parentNode.insertBefore(button,element.nextSibling);});returnevent;});})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account572](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account572](https://community.cybozu.dev/u/Legacy_Account572)\
**Post date:** [2018 年 8 月 16 日午前 5:16 UTC](https://community.cybozu.dev/t/topic/3294/3 "2018-08-16T05:16:55Z")

</div>

江田様

&nbsp;

ありがとうございます。

関口と申します。

仰る通り障害画面上でのテーブルの表示件数についてです。

&nbsp;

あまりよくわかっておらず恐縮ですが、

上記のコードを入れておけば全てのテーブルに設定がかかるのでしょうか。（アプリ内の）

あるいは、フィールドコードを指定して１つずつ設定していくようになるのでしょうか？

&nbsp;

また、Macで上記をそれぞれアップする場合には、

テキストエディットでこちらのコードを打って、

保存したファイルをアップするのでしょうか？

&nbsp;

すみません。基本的な事が分かっておらず、恐縮です。

もしもご回答頂けるようでしたら

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 8 月 16 日午前 5:35 UTC](https://community.cybozu.dev/t/topic/3294/4 "2018-08-16T05:35:25Z")

</div>

株式会社ワークハピネス様

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

アプリ内の全てのサブテーブルに動作するようになっています。  
フィールドコードを指定する必要はありません。

仰る通り、コードはテキストエディタに書き込んで保存し、保存したファイルをアップロードしてください。  
アプリの設定 \> JavaScript / CSSでカスタマイズにてアップロードできると思います。

上述のCSSコードは拡張子を「.css」にして、PC用のCSSファイルにアップロードしてください。  
JavaScriptコードは拡張子を「.js」にして、PC用のJavaScriptファイルにアップロードしてください。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account572](https://avatars.discourse-cdn.com/v4/letter/l/a587f6/32.png) [@Legacy\_Account572](https://community.cybozu.dev/u/Legacy_Account572)\
**Post date:** [2018 年 8 月 16 日午前 5:46 UTC](https://community.cybozu.dev/t/topic/3294/5 "2018-08-16T05:46:35Z")

</div>

ありがとうございます。

無事に実装できました。

今後とも宜しくお願い致します！