Tabulator tips

第15回 paginationで表示行を制限する

2020.03.04

tabulator は表示行が200行を越えると表示が遅くなります。

表示行が200行を越えるテーブルを表示する場合は、 pagination を指定して、1ページの表示数を200行以下にすると 表示が遅くならずにすみます。

pagination は"local" 、１ページに表示する行数は paginationSize で指定します。

new Tabulator("#table", {
    pagination: "local",
    paginationSize: 3,

以下、カラム定義、データ定義、実行結果、サンプルコードです。

カラム定義

{
    title:"日付",
    field:"date",
},
{
    title:"日付(英)",
    field:"dateE",
},
{
    title:"item",
    field:"item",
}

データ定義

{ dateE : "Nov 1", date:"11/1" , item: "bb"},
{ dateE : "Aug 5", date:"8/5"  , item: "bb"},
{ dateE : "Mar 30",date:"5/30" , item: "aa1"},
{ dateE : "Mar 30",date:"5/30" , item: "aa5"},
{ dateE : "Mar 30",date:"5/30" , item: "aa3"},
{ dateE : "Mar 30",date:"5/30" , item: "aa4"},
{ dateE : "Mar 30",date:"5/30" , item: "aa0"},
{ dateE : "Aug 10",date:"8/10" , item: "bb"},
{ dateE : "Jan 10",date:"1/10" , item: "bb"},

実行結果

サンプルコード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
</head>
<body onload="show_table()">
<h1 id=title>paginationで表示行を制限する</h1>

<div id="table"></div>

<script type="text/javascript">
var show_table=function(){
    var tdata = [
        { dateE : "Nov 1", date:"11/1" , item: "bb"},
        { dateE : "Aug 5", date:"8/5"  , item: "bb"},
        { dateE : "Mar 30",date:"5/30" , item: "aa1"},
        { dateE : "Mar 30",date:"5/30" , item: "aa5"},
        { dateE : "Mar 30",date:"5/30" , item: "aa3"},
        { dateE : "Mar 30",date:"5/30" , item: "aa4"},
        { dateE : "Mar 30",date:"5/30" , item: "aa0"},
        { dateE : "Aug 10",date:"8/10" , item: "bb"},
        { dateE : "Jan 10",date:"1/10" , item: "bb"},
    ];
    new Tabulator("#table", {
        pagination: "local",
        paginationSize: 3,
        data:tdata,
        columns: [
            {
                title:"日付",
                field:"date",
            },
            {
                title:"日付(英)",
                field:"dateE",
            },
            {
                title:"item",
                field:"item",
            }
        ]
    });
}
</script>

著者プロフィール

naka

すきなコマンドは awk と bc です。なにかを計算する時、awk か bc を使います。

記事一覧Index