2009年8月30日日曜日

テーブルソート③

テーブルソートの第３回目

ダウンロードはここから。

  1. Table Sorting with Prototype [zipファイルをダウンロードします]



評価
  • 使いやすさ：○　何も指定しなくていいのは、実は楽かも。nosortもあるし。
  • 安心：prototypeは安心ですね。scriptaculousは使ったことないから、自分のスキルに若干不安あり。
  • その他：他のJavaScriptライブラリとの併用は大丈夫？統一すべきだよなー



jQueryのときと変わった部分
  1. 読み込むスクリプトが違うのは当然。
  2. scriptを読み込む＆class指定のみでソート可能



ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/style.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/scriptaculous/lib/prototype.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/fastinit.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/tablesort.js"></script>
</head>
<body>

view plainprint?
  1. <p>ソートしたい場合は、class="sortable"を記述する</p><table id="sample" class="sortable">    <thead>  
  2.         <tr>   
  3.             <th>first name</th>   
  4.             <th>last name</th>   
  5.             <th>age</th>   
  6.             <th>total</th>   
  7.             <th>discount</th>   
  8.             <th>date</th>   
  9.         </tr>   
  10.     </thead>   
  11.     <tbody>   
  12.         <tr>   
  13.             <td>peter</td>   
  14.             <td>parker</td>   
  15.             <td>28</td>   
  16.             <td>$9.99</td>   
  17.             <td>20%</td>   
  18.             <td>jul 6, 2006 8:14 am</td>   
  19.         </tr>   
  20.         <tr>   
  21.             <td>john</td>   
  22.             <td>hood</td>   
  23.             <td>33</td>   
  24.             <td>$19.99</td>   
  25.             <td>25%</td>   
  26.             <td>dec 10, 2002 5:14 am</td>   
  27.         </tr>   
  28.         <tr>   
  29.             <td>clark</td>   
  30.             <td>kent</td>   
  31.             <td>18</td>   
  32.             <td>$15.89</td>   
  33.             <td>44%</td>   
  34.             <td>jan 12, 2003 11:14 am</td>   
  35.         </tr>   
  36.         <tr>   
  37.             <td>bruce</td>   
  38.             <td>almighty</td>   
  39.             <td>45</td>   
  40.             <td>$153.19</td>   
  41.             <td>44%</td>   
  42.             <td>jan 18, 2001 9:12 am</td>   
  43.         </tr>   
  44.         <tr>   
  45.             <td>bruce</td>   
  46.             <td>evans</td>   
  47.             <td>22</td>   
  48.             <td>$13.19</td>   
  49.             <td>11%</td>   
  50.             <td>jan 18, 2007 9:12 am</td>   
  51.         </tr>   
  52.     </tbody>   
  53. </table>  
  54. <p>ソートしたくない場合は、class="nosort"を記述する</p><table id="sample" class="nosort">    <thead>  
  55.         <tr>   
  56.             <th>first name</th>   
  57.             <th>last name</th>   
  58.             <th>age</th>   
  59.             <th>total</th>   
  60.             <th>discount</th>   
  61.             <th>date</th>   
  62.         </tr>   
  63.     </thead>   
  64.     <tbody>   
  65.         <tr>   
  66.             <td>peter</td>   
  67.             <td>parker</td>   
  68.             <td>28</td>   
  69.             <td>$9.99</td>   
  70.             <td>20%</td>   
  71.             <td>jul 6, 2006 8:14 am</td>   
  72.         </tr>   
  73.         <tr>   
  74.             <td>john</td>   
  75.             <td>hood</td>   
  76.             <td>33</td>   
  77.             <td>$19.99</td>   
  78.             <td>25%</td>   
  79.             <td>dec 10, 2002 5:14 am</td>   
  80.         </tr>   
  81.         <tr>   
  82.             <td>clark</td>   
  83.             <td>kent</td>   
  84.             <td>18</td>   
  85.             <td>$15.89</td>   
  86.             <td>44%</td>   
  87.             <td>jan 12, 2003 11:14 am</td>   
  88.         </tr>   
  89.         <tr>   
  90.             <td>bruce</td>   
  91.             <td>almighty</td>   
  92.             <td>45</td>   
  93.             <td>$153.19</td>   
  94.             <td>44%</td>   
  95.             <td>jan 18, 2001 9:12 am</td>   
  96.         </tr>   
  97.         <tr>   
  98.             <td>bruce</td>   
  99.             <td>evans</td>   
  100.             <td>22</td>   
  101.             <td>$13.19</td>   
  102.             <td>11%</td>   
  103.             <td>jan 18, 2007 9:12 am</td>   
  104.         </tr>   
  105.     </tbody>   
  106. </table>  
</body>
</html>
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)