Tabulator tips

第11回 sorter で 日付をソートする

2020.02.05

日付のソートは、組み込みソート("date") が指定できますが、 カスタム関数でソートを行う例を記述します。

ソートは、カラム定義で sorter にカスタム関数 を定義します。

var date_num = function(m,d){
    // 月日を数値に変換して返す。(11/1 -> 1101)
    return Number(m)*100 + Number(d);
}
var sort_date=function(a,b){
    var a1 = a.split('/');
    var b1 = b.split('/');
    return date_num(a1[0], a1[1])-date_num(b1[0], b1[1]);
}
var sort_dateE=function(a,b){ // "Nov 1"
    //indexを月数に対応させるため 0番目に空文字列を入れる。
    //mon_name[1]:"Jan",mon_name[2]:"Feb",..
    var mon_name=["", "Jan","Feb","Mar","Apr","May","Jun",
                      "Jul","Aug","Sep","Oct","Nov","Dec"];
    var a1 = a.split(' ');
    var b1 = b.split(' ');
    return date_num(mon_name.indexOf(a1[0]), a1[1])
         - date_num(mon_name.indexOf(b1[0]), b1[1]);
}

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

カラム定義

{
    title:"日付",
    field:"date",
    sorter: sort_date
},
{
    title:"日付(英)",
    field:"dateE",
    sorter: sort_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> sorter で 日付をソートする </h1>
<div id="table"></div>

<script type="text/javascript">
var date_num = function(m,d){
    // 月日を数値に変換して返す。(11/1 -> 1101)
    return Number(m)*100 + Number(d);
}
var sort_date=function(a,b){
    var a1 = a.split('/');
    var b1 = b.split('/');
    return date_num(a1[0], a1[1])-date_num(b1[0], b1[1]);
}
var sort_dateE=function(a,b){ // "Nov 1"
    //indexを月数に対応させるため 0番目に空文字列を入れる。
    //mon_name[1]:"Jan",mon_name[2]:"Feb",..
    var mon_name=["", "Jan","Feb","Mar","Apr","May","Jun",
                      "Jul","Aug","Sep","Oct","Nov","Dec"];
    var a1 = a.split(' ');
    var b1 = b.split(' ');
    return date_num(mon_name.indexOf(a1[0]), a1[1])
         - date_num(mon_name.indexOf(b1[0]), b1[1]);
}
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", {
        data:tdata,
        columns: [
            {
                title:"日付",
                field:"date",
                sorter: sort_date
            },
            {
                title:"日付(英)",
                field:"dateE",
                sorter: sort_dateE
            },
            {
                title:"item",
                field:"item",
            }
        ]
    });
}
</script>

著者プロフィール

naka

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

記事一覧Index