ITに関するさまざまなトピックを紹介するサイトです
このコンテンツはお使いのブラウザには対応しておりません。
新しいバージョンのブラウザでアクセスしてください。

動的にテーブルをソートする

各列の見出しをクリックすると、その項目の値でテーブル全体がソートされます。
テーブルの全データをあらかじめJavaScriptの配列データとして用意して、ブラウザだけでソート処理が行われます。
データ量が多い場合は、Ajaxでサーバ通信する必要があるでしょう。
ワールドカップ決勝戦の結果
開催年 開催国 勝者 敗者 勝者得点 -
敗者得点		 補足

コード

JavaScriptのコードは以下のようになっています。

ユーティリティ関数

/**
 * クロージャ関数を作成して返す。
 * @param {Function} func 実行する元の関数
 * @param {Object} obj 関数実行時のthis参照オブジェクト
 * @param {Object[]} [args] 実行する関数へ渡す引数の配列
 * @return {Object} 実行した関数の戻り値
 */
function closure(func, obj, args) {
	var closureFunc = function() {
		var comboArgs = new Array();
		if (args != null && (typeof args == "object")) {
			comboArgs = comboArgs.concat(args);
		}
		comboArgs = comboArgs.concat(Array.prototype.slice.call(arguments));
		return func.apply(obj, comboArgs);
	};
	return closureFunc;
};

表示するデータの定義

//テーブル表示するデータオブジェクトの配列の定義
var wcupData = new Array();
wcupData[wcupData.length] = {location:"ウルグアイ", year:1930,
		winner:"ウルグアイ", loser:"アルゼンチン", winScore:4, losScore:2,
		supplement:""};
wcupData[wcupData.length] = {location:"イタリア", year:1934,
		winner:"イタリア", loser:"チェコスロバキア", winScore:2, losScore:1,
		supplement:"延長"};
wcupData[wcupData.length] = {location:"フランス", year:1938,
		winner:"イタリア", loser:"ハンガリー", winScore:4, losScore:2,
		supplement:""};
wcupData[wcupData.length] = {location:"ブラジル", year:1950,
		winner:"ウルグアイ", loser:"ブラジル", winScore:2, losScore:1,
		supplement:"決勝リーグにおける事実上の決勝戦"};
wcupData[wcupData.length] = {location:"スイス", year:1954,
		winner:"西ドイツ", loser:"ハンガリー", winScore:3, losScore:2,
		supplement:""};
wcupData[wcupData.length] = {location:"スウェーデン", year:1958,
		winner:"ブラジル", loser:"スウェーデン", winScore:5, losScore:2,
		supplement:""};
wcupData[wcupData.length] = {location:"チリ", year:1962,
		winner:"ブラジル", loser:"チェコスロバキア", winScore:3, losScore:1,
		supplement:""};
wcupData[wcupData.length] = {location:"イングランド", year:1966,
		winner:"イングランド", loser:"西ドイツ", winScore:4, losScore:2,
		supplement:"延長"};
wcupData[wcupData.length] = {location:"メキシコ", year:1970,
		winner:"ブラジル", loser:"イタリア", winScore:4, losScore:1,
		supplement:""};
wcupData[wcupData.length] = {location:"西ドイツ", year:1974,
		winner:"西ドイツ", loser:"オランダ", winScore:2, losScore:1,
		supplement:""};
wcupData[wcupData.length] = {location:"アルゼンチン", year:1978,
		winner:"アルゼンチン", loser:"オランダ", winScore:3, losScore:1,
		supplement:"延長"};
wcupData[wcupData.length] = {location:"スペイン", year:1982,
		winner:"イタリア", loser:"西ドイツ", winScore:3, losScore:1,
		supplement:""};
wcupData[wcupData.length] = {location:"メキシコ", year:1986,
		winner:"アルゼンチン", loser:"西ドイツ", winScore:3, losScore:2,
		supplement:""};
wcupData[wcupData.length] = {location:"イタリア", year:1990,
		winner:"西ドイツ", loser:"アルゼンチン", winScore:1, losScore:0,
		supplement:""};
wcupData[wcupData.length] = {location:"アメリカ", year:1994,
		winner:"ブラジル", loser:"イタリア", winScore:0, losScore:0,
		supplement:"延長　PK3-2"};
wcupData[wcupData.length] = {location:"フランス", year:1998,
		winner:"フランス", loser:"ブラジル", winScore:3, losScore:0,
		supplement:""};
wcupData[wcupData.length] = {location:"韓国/日本", year:2002,
		winner:"ブラジル", loser:"ドイツ", winScore:2, losScore:0,
		supplement:"韓国と日本の共同開催"};
wcupData[wcupData.length] = {location:"ドイツ", year:2006,
		winner:"イタリア", loser:"フランス", winScore:1, losScore:1,
		supplement:"延長　PK5-3"};
wcupData[wcupData.length] = {location:"南アフリカ共和国", year:2010,
		winner:"スペイン", loser:"オランダ", winScore:1, losScore:0,
		supplement:"延長"};
wcupData[wcupData.length] = {location:"ブラジル", year:2014,
		winner:"ドイツ", loser:"アルゼンチン", winScore:1, losScore:0,
		supplement:"延長"};
wcupData[wcupData.length] = {location:"ロシア", year:2018,
		winner:"フランス", loser:"クロアチア", winScore:4, losScore:2,
		supplement:""};

データ表示関数

/**
 * テーブルにデータを表示する。
 * @param {String} containerId データを表示するテーブルのtbody要素のID
 * @param {Object[]} dataArray データオブジェクトの配列
 */
function drawTable(containerId, dataArray) {
	if (dataArray == null || typeof dataArray != "object") {
		return;
	}
	var container = document.getElementById(containerId);
	if (!container) {
		return;
	}

	// テーブルの内容をクリアする。
	while(container.rows.length > 0) {
		container.deleteRow(0);
	}

	var tr;
	var td;
	var classes = ["centering", "", "", "", "centering", "supplement"];
	for (var i = 0; i < dataArray.length; i++) {
		tr = container.insertRow(container.rows.length);

		td = tr.insertCell(tr.cells.length);
		td.className = classes[tr.cells.length - 1];
		td.innerHTML = dataArray[i].year;

		td = tr.insertCell(tr.cells.length);
		td.className = classes[tr.cells.length - 1];
		td.innerHTML = dataArray[i].location;

		td = tr.insertCell(tr.cells.length);
		td.className = classes[tr.cells.length - 1];
		td.innerHTML = dataArray[i].winner;

		td = tr.insertCell(tr.cells.length);
		td.className = classes[tr.cells.length - 1];
		td.innerHTML = dataArray[i].loser;

		td = tr.insertCell(tr.cells.length);
		td.className = classes[tr.cells.length - 1];
		td.innerHTML = dataArray[i].winScore + " - " + dataArray[i].losScore;

		td = tr.insertCell(tr.cells.length);
		td.className = classes[tr.cells.length - 1];
		if (dataArray[i].supplement == "") {
			td.innerHTML = " ";
		} else {
			td.innerHTML = dataArray[i].supplement;
		}
	}
}

ソート関数

/**
 * テーブルをソートする。
 * @param {String} containerId データを表示するテーブルのtbody要素のID
 * @param {Object[]} dataArray データオブジェクトの配列
 * @param {String} key ソートキー
 * @return {Boolean} FALSE（デフォルトのリンク動作を抑止）
 */
function sortTable(containerId, dataArray, key) {
	if (dataArray == null || typeof dataArray != "object") {
		return false;
	}

	switch(key) {
		case "year":
			dataArray.sort(sortByYear);
			break;
		case "host":
			dataArray.sort(sortByHost);
			break;
		case "winner":
			dataArray.sort(sortByWinner);
			break;
		case "loser":
			dataArray.sort(sortByLoser);
			break;
		case "winScore":
			dataArray.sort(sortByWinScore);
			break;
		case "losScore":
			dataArray.sort(sortByLosScore);
			break;
	}
	drawTable(containerId, dataArray);
	return false;

	function sortByYear(a, b) {
		return a.year - b.year;
	}
	function sortByHost(a, b) {
		var hostA = a.location.toLowerCase();
		var hostB = b.location.toLowerCase();
		if (hostA < hostB) {
			return -1;
		} else if (hostA > hostB) {
			return 1;
		} else {
			return 0;
		}
	}
	function sortByWinner(a, b) {
		var winnerA = a.winner.toLowerCase();
		var winnerB = b.winner.toLowerCase();
		if (winnerA < winnerB) {
			return -1;
		} else if (winnerA > winnerB) {
			return 1;
		} else {
			return 0;
		}
	}
	function sortByLoser(a, b) {
		var loserA = a.loser.toLowerCase();
		var loserB = b.loser.toLowerCase();
		if (loserA < loserB) {
			return -1;
		} else if (loserA > loserB) {
			return 1;
		} else {
			return 0;
		}
	}
	function sortByWinScore(a, b) {
		return b.winScore - a.winScore;
	}
	function sortByLosScore(a, b) {
		return b.losScore - a.losScore;
	}
}

ページ読み込み時の処理

/**
 * リスナを設定する。
 */
$(function(){
	$("#yearHead").click(closure(sortTable, window, ["matchData", wcupData, "year"]));
	$("#hostHead").click(closure(sortTable, window, ["matchData", wcupData, "host"]));
	$("#winnerHead").click(closure(sortTable, window, ["matchData", wcupData, "winner"]));
	$("#loserHead").click(closure(sortTable, window, ["matchData", wcupData, "loser"]));
	$("#winScoreHead").click(closure(sortTable, window, ["matchData", wcupData, "winScore"]));
	$("#losScoreHead").click(closure(sortTable, window, ["matchData", wcupData, "losScore"]));
});

//初期データの表示処理
$(closure(drawTable, window, ["matchData", wcupData]));
当サイトでは、第三者配信による広告サービスを利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報（氏名、住所、メール アドレス、電話番号は含まれません）を使用することがあります。 このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。