カラムでソートできるテーブルを自作してみる - jQuery入門

テーブルのソートについて

やってきました車輪の再発明シリーズ。今回はテーブルのソートです。自作なんて面倒だ、という方はFlexgridが高機能です。

テーブルソートの実行結果

列名をクリックすると、昇順・降順を切り替えてソートできます。

ソース


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<title>テーブルのソート</title>

<script>

var tds = [

  ["メラ", "  2"],

  ["メラミ", "  6"],



・・・・・・中略・・・・・・



  ["トラマナ", "  2"]

];



$(function() {

  function draw() {

    var tag = '';

    $.each(tds, function(i, val) {

      tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td></tr>';

    });

    $('tbody').html(tag);

  }

  $('th').click(function() {

    var arrow = $('span', this);

    var col = $('th').index(this);

    if (arrow.html() == '▼') {

      arrow.html('▲');

      tds.sort(function(a, b) { return a[col] < b[col] ? -1 : 1; });

    } else {

      arrow.html('▼');

      tds.sort(function(a, b) { return b[col] < a[col] ? -1 : 1; });

    }

    $(this).siblings().find('span').html('');

    draw();

  });

  draw();

});

</script>

<style>

th, td {

  border: 1px solid black;

  padding: 2px;

}

th {

  background-color: #ccc;

  cursor: pointer;

}

</style>

</head>

<body>

<table><thead><tr><th>名前<span></span></th><th>消費ＭＰ<span></span></th></tr></thead><tbody></tbody></table>

</body>

</html>

プログラムの解説

テーブルの内容はtdsという２次元配列に格納しています。

draw関数

tableタグにtds配列の中身から生成したtr, tdタグを付け加えてテーブルを生成している部分です。


$.each(tds, function(i, val) {

$.eachは配列やオブジェクトに対して使うことのできる汎用的な繰り返し関数です。配列tdsに対して要素を先頭から一つずつ取り出し関数の中身が実行されます。そのとき、インデックスがi、値がvalに代入されます。


tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td></tr>';

テーブル一行分のタグを生成しています。


$('tbody').html(tag);

全ての行数分のタグを生成した後、tbodyのhtmlとして追加しています。

先頭行のクリックイベント


$('th').click(function() {

先頭行のth要素がクリックされたときに以下が実行されます。


var arrow = $('span', this);

このように書くと、this（クリックされたth要素）の子要素の中からspan要素を検索します。このspan要素の中に昇順・降順を示す矢印が入ります。


var col = $('th').index(this);

colにはクリックされたカラムが左から数えて何番目かが入ります（一番左のカラムが0、次が1。）。th要素全ての中からindex関数によってクリックされた要素が何番目かを調べています。


arrow.html('▲');

tds.sort(function(a, b) { return a[col] < b[col] ? -1 : 1; });

降順の場合の処理です。JavaScript標準のsort関数に、選択されたカラムの文字列を比較する関数を登録しています。


arrow.html('▼');

tds.sort(function(a, b) { return b[col] < a[col] ? -1 : 1; });

昇順の場合の処理です。降順の逆ですね。


$(this).siblings().find('span').html('');

クリックされた要素以外のth要素の矢印を消しています。siblings()で兄弟要素、すなわち自分以外のth要素を選択します。

注意点

今回のソート関数は手抜きなので数値の比較ができません。上記ソースでは数値の桁を揃えて誤魔化しています。本来なら配列の値が数値かどうか調べてからソートするのが良いと思います。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト