Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法
テーブル
TinyTableSorter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinyTable</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable" style="width:665px">
<thead>
<tr>
<th><h3>ID</h3></th>
<th><h3>Name</h3></th>
<th><h3>Email</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>---</td>
<td><a href="mailto:#">1</a></td>
</tr>
<tr>
<td>2</td>
<td>---</td>
<td><a href="mailto:#">3</a></td>
</tr>
<tr>
<td>3</td>
<td>---</td>
<td><a href="mailto:#">5</a></td>
</tr>
<tr>
<td>4</td>
<td>---</td>
<td><a href="mailto:#">6</a></td>
</tr>
<tr>
<td>5</td>
<td>---</td>
<td><a href="mailto:#">9</a></td>
</tr>
<tr>
<td>6</td>
<td>---</td>
<td><a href="mailto:#">5</a></td>
</tr>
<tr>
<td>7</td>
<td>---</td>
<td><a href="mailto:#">45</a></td>
</tr>
<tr>
<td>8</td>
<td>---</td>
<td><a href="mailto:#">678</a></td>
</tr>
<tr>
<td>9</td>
<td>---</td>
<td><a href="mailto:#">322</a></td>
</tr>
<tr>
<td>10</td>
<td>---</td>
<td><a href="mailto:#">35454</a></td>
</tr>
<tr>
<td>11</td>
<td>---</td>
<td><a href="mailto:#">546</a></td>
</tr>
<tr>
<td>12</td>
<td>---</td>
<td><a href="mailto:#">22</a></td>
</tr>
<tr>
<td>13</td>
<td>---</td>
<td><a href="mailto:#">23</a></td>
</tr>
<tr>
<td>14</td>
<td>---</td>
<td><a href="mailto:#">45</a></td>
</tr>
<tr>
<td>15</td>
<td>---</td>
<td><a href="mailto:#">64</a></td>
</tr>
<tr>
<td>16</td>
<td>---</td>
<td><a href="mailto:#">544</a></td>
</tr>
<tr>
<td>17</td>
<td>---</td>
<td><a href="mailto:#">67</a></td>
</tr>
<tr>
<td>18</td>
<td>---</td>
<td><a href="mailto:#">3345</a></td>
</tr>
<tr>
<td>19</td>
<td>---</td>
<td><a href="mailto:#">657</a></td>
</tr>
<tr>
<td>20</td>
<td>---</td>
<td><a href="mailto:#">432</a></td>
</tr>
<tr>
<td>21</td>
<td>---</td>
<td><a href="mailto:#">11</a></td>
</tr>
<tr>
<td>22</td>
<td>---</td>
<td><a href="mailto:#">12</a></td>
</tr>
<tr>
<td>23</td>
<td>---</td>
<td><a href="mailto:#">14</a></td>
</tr>
<tr>
<td>24</td>
<td>---</td>
<td><a href="mailto:#">245</a></td>
</tr>
<tr>
<td>25</td>
<td>---</td>
<td><a href="mailto:#">67</a></td>
</tr>
<tr>
<td>26</td>
<td>---</td>
<td><a href="mailto:#">455</a></td>
</tr>
<tr>
<td>27</td>
<td>---</td>
<td><a href="mailto:#">432</a></td>
</tr>
<tr>
<td>28</td>
<td>---</td>
<td><a href="mailto:#">78</a></td>
</tr>
<tr>
<td>29</td>
<td>---</td>
<td><a href="mailto:#">456</a></td>
</tr>
<tr>
<td>30</td>
<td>---</td>
<td><a href="mailto:#">67</a></td>
</tr>
<tr>
<td>31</td>
<td>---</td>
<td><a href="mailto:#">8676</a></td>
</tr>
<tr>
<td>32</td>
<td>---</td>
<td><a href="mailto:#">658</a></td>
</tr>
<tr>
<td>33</td>
<td>---</td>
<td><a href="mailto:#">90</a></td>
</tr>
<tr>
<td>34</td>
<td>---</td>
<td><a href="mailto:#">766</a></td>
</tr>
<tr>
<td>35</td>
<td>---</td>
<td><a href="mailto:#">780</a></td>
</tr>
<tr>
<td>36</td>
<td>---</td>
<td><a href="mailto:#">434</a></td>
</tr>
<tr>
<td>37</td>
<td>---</td>
<td><a href="mailto:#">765</a></td>
</tr>
<tr>
<td>38</td>
<td>---</td>
<td><a href="mailto:#">6789</a></td>
</tr>
<tr>
<td>39</td>
<td>---</td>
<td><a href="mailto:#">899</a></td>
</tr>
<tr>
<td>40</td>
<td>---</td>
<td><a href="mailto:#">666</a></td>
</tr>
<tr>
<td>41</td>
<td>---</td>
<td><a href="mailto:#">777</a></td>
</tr>
<tr>
<td>42</td>
<td>---</td>
<td><a href="mailto:#">888</a></td>
</tr>
<tr>
<td>43</td>
<td>---</td>
<td><a href="mailto:#">999</a></td>
</tr>
<tr>
<td>44</td>
<td>---</td>
<td><a href="mailto:#">433</a></td>
</tr>
<tr>
<td>45</td>
<td>---</td>
<td><a href="mailto:#">411</a></td>
</tr>
<tr>
<td>46</td>
<td>---</td>
<td><a href="mailto:#">333</a></td>
</tr>
<tr>
<td>47</td>
<td>---</td>
<td><a href="mailto:#">222</a></td>
</tr>
<tr>
<td>48</td>
<td>---</td>
<td><a href="mailto:#">345</a></td>
</tr>
<tr>
<td>49</td>
<td>---</td>
<td><a href="mailto:#">45567</a></td>
</tr>
<tr>
<td>50</td>
<td>---</td>
<td><a href="mailto:#">4343456</a></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="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="images/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 type="text/javascript" src="script.js"></script>
<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("table",1);
</script>
</body>
</html>
データのソートとページ送りが可能なテーブルを実装するスクリプトです。
有名どころのフレームワークは使用していませんが、ストライプ表示と列選択の表示が可能です。
データをアウトプットするシステムと組み合わせてみてはいかがでしょうか。
サイトへ行きsorter.zipをダウンロードしてきてください。
（Click here to download the source code.をクリック）
解凍したらimagesフォルダ、script.js、style.cssを任意の場所へアップロードします。
CSSファイルを読み込ませます。
<link rel="stylesheet" href="style.css" />
jsファイルは<head>内でなくテーブルの後に読み込ませます。
通常通り<table>を組みます。
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
</table>
まずid="table"はターゲットとして付けられたもので、後でスクリプトのトリガーでも書き込みます。
class="sorttable"はstyle.cssで定義づけられたスタイルです。
次にテーブルの項目を記述します。
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<tr>
<th class="nosort"><h3>ID</h3></th>
<th><h3>Name</h3></th>
<th><h3>Phone</h3></th>
</tr>
</table>
上記のように<th>内に<h3>を入れ子にすると、ソート用の画像が表示されるようになります。
<h3>が必要なければ、style.css内の記述を調節してください。
また、ソートさせたくない項目はclass="nosort"をつけることでソートしなくなります。
後は、<tr>単位で<td>でデータを記述していけばテーブルが完成します。
このスクリプトは、ページ送り機能と１ページのデータ表示件数をユーザーが操作できる機能が付いています。
<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>Entries Per Page</span>
</div>
<div id="navigation">
<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
</div>
これをテーブルのすぐ後に追加してください。
最後にスクリプトを読み込ませトリガーを記述します。
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head"; //<th>に付加するクラス名
sorter.asc = "asc"; //<th>に付加するクラス名（昇順）
sorter.desc = "desc";//<th>に付加するクラス名（降順）
sorter.even = "evenrow";//<tr>に付加するクラス名(行非選択）
sorter.odd = "oddrow";//<tr>に付加するクラス名(行選択）
sorter.evensel = "evenselected";//<td>に付加するクラス名(列選択）
sorter.oddsel = "oddselected";//<td>に付加するクラス名(列選択）
sorter.paginate = true;// true or false でページ送りするか否か
sorter.currentid = "currentpage";//
sorter.limitid = "pagelimit";//
sorter.init("table",1);//ソートするテーブルのID
</script>
これをページ送りなどの後に記述してください。
ページ送りもできたり表示件数も変えられるので利便性がとても良いと思います。データをメインコンテンツにしているサイトなどは検討してみてはいかがでしょうか。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
