2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に!

表組みで縦に長くなると、もう最初と最後の関連性なんてわからなくなります。
今回紹介するJavaScriptはソートに加え表示件数を制御、ページャー付きと高機能なものが、わずか2.5kbで可能です。
via:TinyTable JavaScript Table Sorter

sponsors

使用方法

TinyTable JavaScript Table Sorterからファイル一式をダウンロードします。

<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
上記をhead内に書き込んだ後、テーブルを記述します。

<table cellpadding="0" cellspacing="0" border="0" id="id名" class="sortable">
	<thead>
		<tr>
			<th class="nosort"><h3>ID</h3></th>
			<!-- classにnosortでソートされません -->
			<th><h3>Name</h3></th>
			<th><h3>Phone</h3></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Ezekiel Hart</td>
			<td>(627) 536-4760</td>
		</tr>
		<!-- 以下テーブル分 -->
	</tbody>
 </table>
<!-- ここからコントローラ部分 -->
<div id="controls">
	<!-- ここから表示項目数調整 -->
	<div id="perpage">
		<select onchange="sorter.size(this.value)">
		<option value="5">5</option>
			<option value="10" selected="selected">10</option>
			<option value="20">20</option>
			<option value="50">50</option>
			<option value="100">100</option>
		</select>
		<span>件/ページ</span>
	</div>
	<!-- ここからページャー調整 -->
	<div id="navigation">
		<img src="first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
		<img src="previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
		<img src="next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
		<img src="last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
	</div>
	<div id="text">現在のページ <span id="currentpage"></span> of <span id="pagelimit"></span></div>
</div>
最後に以下のscriptを書き込みます。

<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
	sorter.init("id名",1);
</script>
最低限ですと上記で十分ですが、以下のようなオプションを加えられます。
これによりclassやidが振られ、cssにより自動でサンプルのような見た目も高機能にできます。

<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
	sorter.head = "head";
	sorter.asc = "asc";
	sorter.desc = "desc";
	sorter.even = "evenrow";
	sorter.odd = "oddrow";
	sorter.evensel = "evenselected";
	sorter.oddsel = "oddselected";
	sorter.paginate = true;
	sorter.currentid = "currentpage";
	sorter.limitid = "pagelimit";
	sorter.init("id名",1);
</script>

サンプル

ID

Name

Phone

Zip

Birthdate

Last Access

Rating

Done

Salary

Score

1 Ezekiel Hart (627) 536-4760 53082 12/02/1962 March 26, 2009 -7 7% $73,229 6.9
2 Jaquelyn Pace (921) 943-5780 46789 06/03/1957 October 20, 2006 -7 33% $130,752 4.9
3 Lois Pickett (835) 361-5993 9814 10/15/1983 June 01, 1999 4 44% $48,684 5.5
4 Keane Raymond (605) 803-1561 97129 07/30/1982 July 24, 1996 5 20% $7,023 9.5
5 Porter Thomas (666) 569-9894 59953 09/27/1986 December 05, 2007 1 66% $69,875 0.9
6 Imani Murphy (771) 294-6690 69771 10/23/1970 December 08, 1996 -1 30% $113,763 4.9
7 Zachery Guthrie (851) 784-4129 66960 12/22/1972 September 20, 2002 -5 24% $130,248 6.9
8 Harper Bowen (810) 652-6704 77110 10/26/1973 May 29, 1996 5 49% $73,197 4.5
9 Caldwell Larson (850) 562-3177 87519 07/20/1985 June 22, 2004 -3 81% $63,736 7.5
10 Baker Osborn (378) 371-0559 69446 03/29/1970 July 23, 2005 -7 61% $2,868 0.1
11 Yael Owens (465) 520-1801 93872 08/10/1963 April 09, 1997 10 85% $126,469 8.9
12 Fletcher Briggs (992) 962-9419 87282 08/12/1971 December 12, 2006 7 23% $142,448 8.9
13 Maggy Murphy (585) 210-0390 98081 07/11/1968 April 02, 2007 9 31% $40,267 6.9
14 Maggie Blake (489) 101-5447 85131 04/11/1970 May 24, 2008 -2 32% $99,686 7.9
15 Ginger Bell (934) 692-7294 78878 06/10/1957 April 13, 2003 -10 74% $112,997 4.5
16 Iliana Ballard (806) 835-7035 84718 02/09/1989 March 27, 1996 -6 78% $5,282 5.5
17 Alisa Monroe (859) 974-4442 89057 02/14/1990 April 30, 2003 6 95% $103,999 5.9
18 Kenyon Luna (673) 147-0443 18035 04/14/1981 April 17, 2009 9 14% $37,014 7.9
19 Nola Kerr (340) 430-0424 93815 11/06/1959 August 14, 2000 10 2% $104,149 0.5
20 Gail Cash (291) 455-8520 16919 09/09/1970 April 27, 2002 -1 84% $31,090 1.5
21 Kalia Ayala (142) 520-1128 45675 04/25/1971 March 30, 2001 5 30% $44,641 5.9
22 Violet Ballard (126) 374-6078 45791 01/23/1984 June 08, 2006 -10 85% $46,450 7.9
23 Kevin Carrillo (687) 483-9669 27432 03/17/1977 October 01, 2005 -3 5% $51,754 1.5
24 Alexandra Nixon (422) 644-3488 58955 12/01/1981 February 25, 2001 -1 41% $46,672 7.5
25 Charissa Manning (438) 395-9392 63431 07/01/1980 April 02, 2005 -8 11% $32,193 3.5
26 Noah Smith (963) 652-2643 83867 01/19/1986 April 03, 2005 -5 86% $96,995 3.5
27 Patience Battle (294) 644-5306 43578 09/16/1988 October 19, 2003 7 62% $47,510 4.5
28 Kathleen Hudson (190) 189-1420 68091 08/03/1963 January 03, 2004 8 27% $36,286 6.9
29 Marsden Bowman (163) 780-6121 91684 03/08/1974 June 29, 2005 10 46% $124,913 1.5
30 Dorian Hodge (304) 536-8850 29398 08/16/1978 February 21, 2007 6 6% $28,057 0.1
31 Levi Britt (272) 171-5731 56521 12/10/1988 August 11, 2008 7 6% $100,959 1.5
32 Rana Blake (608) 893-4909 16341 07/23/1959 February 13, 1997 -4 26% $87,972 4.9
33 Helen Mccullough (937) 368-5946 3033 09/13/1980 May 17, 2001 8 18% $51,217 9.9
34 Gil Ferguson (832) 581-6953 43556 04/19/1980 March 22, 1996 -6 83% $120,374 6.9
35 Judah Manning (332) 888-8768 43672 07/16/1974 December 14, 2009 9 34% $95,173 6.9
36 Yoshi Humphrey (961) 215-0426 51179 01/13/1962 August 24, 1997 4 84% $140,552 3.9
37 Idona Williams (163) 580-2609 88693 08/27/1967 February 22, 2000 -3 15% $37,762 5.9
38 Petra Bennett (976) 799-4111 46753 01/02/1959 April 27, 1999 2 81% $32,371 6.5
39 Phyllis Rogers (798) 959-3321 39212 11/27/1961 February 14, 2009 -10 42% $77,847 4.9
40 Fritz Benton (525) 353-2984 11530 10/02/1957 June 16, 2002 -5 2% $75,654 8.9
41 Mannix Davidson (106) 260-1651 15815 08/24/1964 October 24, 2002 1 93% $11,498 2.5
42 Grant Lawrence (807) 487-5786 50743 10/10/1973 March 28, 2007 9 6% $137,743 3.9
43 Laurel Ortiz (945) 481-7808 92426 08/19/1962 May 11, 2006 5 55% $64,799 8.9
44 Lewis Frank (844) 314-8683 35378 12/01/1966 January 25, 1998 5 30% $99,927 1.5
45 Yasir Knox (814) 509-0367 36004 10/23/1981 August 20, 2007 -2 61% $36,618 0.9
46 Palmer Newman (955) 748-1014 78774 10/29/1980 December 28, 2007 -9 85% $19,325 2.5
47 Tate Webster (107) 247-3380 25232 06/11/1963 August 11, 2005 -4 14% $109,433 6.5
48 Charity Hahn (395) 200-9188 28260 08/04/1976 January 17, 2009 -2 86% $3,246 5.5
49 Katell Crosby (259) 659-7498 31001 12/31/1961 January 02, 2007 8 10% $67,319 8.9
50 Eden Burks (576) 196-6013 30822 02/27/1964 April 27, 2002 3 6% $109,631 2.5
件/ページ
現在のページ of

sponsors

Javascriptサンプルページ一覧
skuare.net