tabulator は表示行が200行を越えると表示が遅くなります。
表示行が200行を越えるテーブルを表示する場合は、 pagination を指定して、1ページの表示数を200行以下にすると 表示が遅くならずにすみます。
pagination は"local" 、1ページに表示する行数は 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>