LoginSignup
1
0

More than 3 years have passed since last update.

@fallaf(aki fuku)

WEBページ上で、テーブルを列ごとにソートできるようにする

Last updated at Posted at 2021-02-26

はじめに

image.png

WEBページを作る際、こういったテーブルを表示したいという時があるかと思います。
この時、テーブルのタイトル行をクリックしたら、その列に従って中身がソートされればいいのになと思うことがあるかと思います。
「名前」を一回クリックしたとき
　
「名前」をもう一回クリック

「おいしさ」を一回クリック

こういう動きを実装するにあたって、テーブルの中身が別ファイルから取ってくるもの（今回はWEBAPIでGETしてきたJSONデータ）だった場合に、簡単に実装出来てかつ思う通りに動くものがなかなか見つからなかったため、ここで紹介させていただきます。
sortable.jsです。

環境

OS：Windows10
sortable.js：Version 1.5.7

実装

sortable.jsの使い方を簡単に説明します。

JavaScript側

上記URLからsortable.jsをダウンロードし、sortable.jsとして保存します。
今回は、「js」フォルダを作成して、その中に置きました。


URL先が見れなかったときのためのコピペ
/*
Table sorting script  by Joost de Valk, check it out at http://www.joostdevalk.nl/code/sortable-table/.
Based on a script from http://www.kryogenix.org/code/browser/sorttable/.
Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .

Copyright (c) 1997-2007 Stuart Langridge, Joost de Valk.

Version 1.5.7

2007/9/26 japanese ver by KazumaNishihata
http://blog.webcreativepark.net/2007/09/26-024416.html
*/

/* You can change these values */
var image_path = "./";
var image_up = "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";
var europeandate = true;
var alternate_row_colors = true;

/* Don't change anything below this unless you know what you're doing */
addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;
var thead = false;

function sortables_init() {
    // Find all tables with class sortable and make them sortable
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0;ti<tbls.length;ti++) {
        thisTbl = tbls[ti];
        if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            ts_makeSortable(thisTbl);
        }
    }
}

function ts_makeSortable(t) {
    if (t.rows && t.rows.length > 0) {
        if (t.tHead && t.tHead.rows.length > 0) {
            var firstRow = t.tHead.rows[t.tHead.rows.length-1];
            thead = true;
        } else {
            var firstRow = t.rows[0];
        }
    }
    if (!firstRow) return;

    // We have a first row: assume it's the header, and make its contents clickable links
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {
            cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this, '+i+');return false;">'+txt+'<span class="sortarrow">&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/></span></a>';
        }
    }
    if (alternate_row_colors) {
        alternate(t);
    }
}

function ts_getInnerText(el) {
    if (typeof el == "string") return el;
    if (typeof el == "undefined") { return el };
    if (el.innerText) return el.innerText;  //Not needed but it is faster
    var str = "";

    var cs = el.childNodes;
    var l = cs.length;
    for (var i = 0; i < l; i++) {
        switch (cs[i].nodeType) {
            case 1: //ELEMENT_NODE
                str += ts_getInnerText(cs[i]);
                break;
            case 3: //TEXT_NODE
                str += cs[i].nodeValue;
                break;
        }
    }
    return str;
}

function ts_resortTable(lnk, clid) {
    var span;
    for (var ci=0;ci<lnk.childNodes.length;ci++) {
        if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
    }
    var spantext = ts_getInnerText(span);
    var td = lnk.parentNode;
    var column = clid || td.cellIndex;
    var t = getParent(td,'TABLE');
    // Work out a type for the column
    if (t.rows.length <= 1) return;
    var itm = "";
    var i = 0;
    while (itm == "" && i < t.tBodies[0].rows.length) {
        var itm = ts_getInnerText(t.tBodies[0].rows[i].cells[column]);
        itm = trim(itm);
        if (t.tBodies[0].rows[i].cells[column].tagName == "TH" || t.tBodies[0].rows[i].className == "unsortable" || t.tBodies[0].rows[i].className.indexOf("unsortable") != -1 || itm.length == 0) {
            itm = "";
        }
        i++;
    }
    if (itm == "") return; 
    sortfn = ts_sort_caseinsensitive;
    if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfn = ts_sort_date;
    if (itm.match(/^-?\\?(\d+[,\.]?)+(\u5186)?%?$/)) sortfn = ts_sort_numeric;
    SORT_COLUMN_INDEX = column;
    var firstRow = new Array();
    var newRows = new Array();
    for (k=0;k<t.tBodies.length;k++) {
        for (i=0;i<t.tBodies[k].rows[0].length;i++) { 
            firstRow[i] = t.tBodies[k].rows[0][i]; 
        }
    }
    for (k=0;k<t.tBodies.length;k++) {
        if (!thead) {
            // Skip the first row
            for (j=1;j<t.tBodies[k].rows.length;j++) { 
                newRows[j-1] = t.tBodies[k].rows[j];
            }
        } else {
            // Do NOT skip the first row
            for (j=0;j<t.tBodies[k].rows.length;j++) { 
                newRows[j] = t.tBodies[k].rows[j];
            }
        }
    }
    newRows.sort(sortfn);
    if (span.getAttribute("sortdir") == 'down') {
            ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_down + '" alt="&darr;"/>';
            newRows.reverse();
            span.setAttribute('sortdir','up');
    } else {
            ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_up + '" alt="&uarr;"/>';
            span.setAttribute('sortdir','down');
    } 
    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
    // don't do sortbottom rows
    for (i=0; i<newRows.length; i++) { 
        if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {
            t.tBodies[0].appendChild(newRows[i]);
        }
    }
    // do sortbottom rows only
    for (i=0; i<newRows.length; i++) {
        if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) 
            t.tBodies[0].appendChild(newRows[i]);
    }
    // Delete any other arrows there may be showing
    var allspans = document.getElementsByTagName("span");
    for (var ci=0;ci<allspans.length;ci++) {
        if (allspans[ci].className == 'sortarrow') {
            if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
                allspans[ci].innerHTML = '&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/>';
            }
        }
    }       
    span.innerHTML = ARROW;
    alternate(t);
}

function getParent(el, pTagName) {
    if (el == null) {
        return null;
    } else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) {
        return el;
    } else {
        return getParent(el.parentNode, pTagName);
    }
}

function sort_date(date) {  
    // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
    dt = "00000000";
    if (date.length == 11) {
        mtstr = date.substr(3,3);
        mtstr = mtstr.toLowerCase();
        switch(mtstr) {
            case "jan": var mt = "01"; break;
            case "feb": var mt = "02"; break;
            case "mar": var mt = "03"; break;
            case "apr": var mt = "04"; break;
            case "may": var mt = "05"; break;
            case "jun": var mt = "06"; break;
            case "jul": var mt = "07"; break;
            case "aug": var mt = "08"; break;
            case "sep": var mt = "09"; break;
            case "oct": var mt = "10"; break;
            case "nov": var mt = "11"; break;
            case "dec": var mt = "12"; break;
            // default: var mt = "00";
        }
        dt = date.substr(7,4)+mt+date.substr(0,2);
        return dt;
    } else if (date.length == 10) {
        if (europeandate == false) {
            dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2);
            return dt;
        } else {
            dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2);
            return dt;
        }
    } else if (date.length == 8) {
        yr = date.substr(6,2);
        if (parseInt(yr) < 50) { 
            yr = '20'+yr; 
        } else { 
            yr = '19'+yr; 
        }
        if (europeandate == true) {
            dt = yr+date.substr(3,2)+date.substr(0,2);
            return dt;
        } else {
            dt = yr+date.substr(0,2)+date.substr(3,2);
            return dt;
        }
    }
    return dt;
}

function ts_sort_date(a,b) {
    dt1 = sort_date(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
    dt2 = sort_date(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));

    if (dt1==dt2) {
        return 0;
    }
    if (dt1<dt2) { 
        return -1;
    }
    return 1;
}
function ts_sort_numeric(a,b) {
    var aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    aa = clean_num(aa);
    var bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    bb = clean_num(bb);
    return compare_numeric(aa,bb);
}
function compare_numeric(a,b) {
    var a = parseFloat(a);
    a = (isNaN(a) ? 0 : a);
    var b = parseFloat(b);
    b = (isNaN(b) ? 0 : b);
    return a - b;
}
function ts_sort_caseinsensitive(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
    if (aa==bb) {
        return 0;
    }
    if (aa<bb) {
        return -1;
    }
    return 1;
}
function ts_sort_default(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa==bb) {
        return 0;
    }
    if (aa<bb) {
        return -1;
    }
    return 1;
}
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,   NS6 and Mozilla
// By Scott Andrew
{
    if (elm.addEventListener){
        elm.addEventListener(evType, fn, useCapture);
        return true;
    } else if (elm.attachEvent){
        var r = elm.attachEvent("on"+evType, fn);
        return r;
    } else {
        alert("Handler could not be removed");
    }
}
function clean_num(str) {
    str = str.replace(new RegExp(/[^-?0-9.]/g),"");
    return str;
}
function trim(s) {
    return s.replace(/^\s+|\s+$/g, "");
}
function alternate(table) {
    // Take object table and get all it's tbodies.
    var tableBodies = table.getElementsByTagName("tbody");
    // Loop through these tbodies
    for (var i = 0; i < tableBodies.length; i++) {
        // Take the tbody, and get all it's rows
        var tableRows = tableBodies[i].getElementsByTagName("tr");
        // Loop through these rows
        // Start at 1 because we want to leave the heading row untouched
        for (var j = 0; j < tableRows.length; j++) {
            // Check if j is even, and apply classes for both possible results
            if ( (j % 2) == 0  ) {
                if ( !(tableRows[j].className.indexOf('odd') == -1) ) {
                    tableRows[j].className = tableRows[j].className.replace('odd', 'even');
                } else {
                    if ( tableRows[j].className.indexOf('even') == -1 ) {
                        tableRows[j].className += " even";
                    }
                }
            } else {
                if ( !(tableRows[j].className.indexOf('even') == -1) ) {
                    tableRows[j].className = tableRows[j].className.replace('even', 'odd');
                } else {
                    if ( tableRows[j].className.indexOf('odd') == -1 ) {
                        tableRows[j].className += " odd";
                    }
                }
            } 
        }
    }
}


また、URL先（と上のコピペ）の実装では▲マークの表現にgif画像を使っているのですが、個人的に画像を用意するのが面倒だったため、image_up系はこのような文字列に変更しました。
cell.innerHTMLに代入するHTML文の中の、<span>タグ内の<img>内をそのままimage_noneに書き換える形です。
他の箇所もそれぞれ書き換えました。

var image_up = '&nbsp;&nbsp;▲▽';
var image_down = '&nbsp;&nbsp;△▼';
var image_none = '&nbsp;&nbsp;▲▼';

HTML側

ここでは普通にheadタグ内でsortable.jsを設定し、bodyタグ内でテーブルを作成します。
ソートができるようにするには<table>のclassにsortableを追加するだけです。
ここで、「購入」ボタンはソートできてもしょうがないので、ソート無しの設定にします。classにunsortableを追加することで、この列ではソートしないように設定することができます。

<head>
    <!-- 色々省略 -->
    <script src="./js/sortable.js" type="text/javascript"></script>
</head>
...
<body>
<div style="height:250pt; width:100%; overflow-y:scroll; margin-top: 10px;">
    <table id="eattable" border="solid gray 1px" class="sortable">
        <thead>
            <tr>
                <th class="th_1">名前</th>
                <th class="th_2">分類</th>
                <th class="th_3">収穫日時</th>
                <th class="th_4">おいしさ</th>
                <th class="th_5 unsortable">購入</th>
            </tr>
        </thead>
        <tbody id="eattablebody"></tbody>
        <!-- テーブルの中身はJSONデータから取得して別で設定 -->
    </table>
</div>
</body>

また、このままだとリストを更新した際に、ソート状態は解除されるのに「▲▽」「△▼」の表示が残ってしまいます。
なのでリスト更新処理を書いた後は以下のようにしてテーブル名内の▲マークを元の状態に戻すと良いかと思います。

var allspans = document.getElementsByTagName("span");
for (var ci=0;ci<allspans.length;ci++) {
    if (allspans[ci].className == 'sortarrow') {
        allspans[ci].innerHTML = '&nbsp;&nbsp;▲▼';
    }
}

CSS

ここは人それぞれの好みがあるかと思うため読み飛ばしOKです。
個人的にテーブル名にリンクの下線が引いてあるのはあまり見ないのでリンク線は無し、▲マークが黒だと列名の邪魔なので色を灰色にしました。

a.sortheader{
    text-decoration: none;
    color: black;
}

.sortarrow{
    color: gray;
}

注意点

テーブル内の列名（文字列）に対してリンク（<a>タグ）が設定されているため、テーブル名の文字列部分をクリックしないとソートできないようになっています。
なので、上の画像のように
「名前 ▲▼　　　　　　」
のような不格好な状態になっている列名の右半分の白い部分をクリックしてもソートされないため、場合によっては文句を言われるかもしれません。

最後に

URL先を見ると、固定行を用意する、行ごとに色を変える、という実装も可能なようです。
今回実現したい内容には不要だったので試しませんでしたが、どちらもソート可能設定と同じく簡単な設定で実現可能なようなので、大変ありがたいです。
あと「名前　▲▼　　　　」みたいなのじゃなくて「名前　　　　▲▼」みたいにしたかったんですけども、「::after」とかを使うと3パターンの切り替えが大変そうだったので日和りました。

固定行と色

・行ごとに色を変える
　奇数行のclassに「odd」、偶数行のclassに「even」が追加されるため、CSSで指定すればOKです。
　（上に貼った画像の表はElements見てもなぜかodd, even等の設定が無かった…やはりファイル取得してくるパターンだとダメなのか）
・固定行を作る
　固定にしたい行（tr）のclassに「sortbottom」を追加すればOKです。
　ただし、「bottom」とついているだけあって最下行に固定されることに注意してください。

参考リンク

https://blog.webcreativepark.net/2007/09/26-024416.html (日本語対応版)
https://blog.webcreativepark.net/2007/09/24-172811.html (↑の元の紹介記事)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0