JQuery 表格欄位排序 plugin

點選上面這張圖片就可以看到效果~

這是一個我自製的簡單表格排序 plugin，
說起來簡單其實背後的運作也是頗複雜的，
複雜的在於要讓所有的欄位不需要命名且互相進行連動，
光是這個邏輯觀念我就想了整整一天，
不過可以套用在任何表格上喔~

在不透過資料庫的狀況下，
必須要利用多維陣列的概念來進行排序，
而且不單純只是多維陣列，
而是多維陣列中的多維陣列中的多維陣列(三層)，
真是一有個閃神就會亂掉了說~

套用這個 plugin 只有五個屬性需要設定，
而且只是在設定標示有排序那一行的箭頭圖案與位置，
不需要圖片或是位置亂掉的話，就把屬性移除就可以囉~
比較重要的設定在 html 的 th 標籤內，
需要排序的行，就在他的 th 上加入 sort="true" 的標籤，
該行就會自動加上箭頭以及點選排序的效果了，
不加 sort="true" 的就不會進行排序喔~
不過中文字因為編碼的關係，無法單純使用js排序，
算是這個 plugin 最美中不足的地方~

oxxo_sortTableTd_v1.js 下載 (點選右鍵下載)

屬性設定：

iconImage : "img/sort_arrow.png", //排序icon圖檔
iconWidth : 7,                    //圖檔寬度
iconHeight : 11,                  //圖檔高度
iconPaddingRight : 0,             //圖檔和右邊邊框的距離
iconPAddingTop : 9               //圖檔和上面邊框的

html原始碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jquery oxxo-sortTableTd plugin</title>
 <style>
  body{margin:40px;}
    table,td,th{padding:0; border-spacing:0; border:1px solid #000; border-collapse:collapse; font-size:12px;}
    th{width:70px; height:30px; background-color:#666; color:#fff;}
    td{height:30px; text-align:center;}
   </style>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_sortTableTd_v1.js"></script>
   <script>
    $(function(){
     $("#table0").sortTableTd({
      iconImage : "img/sort_arrow.png", //排序icon圖檔
      iconWidth : 7,                    //圖檔寬度
      iconHeight : 11,                  //圖檔高度
      iconPaddingRight : 0,             //圖檔和右邊邊框的距離
      iconPAddingTop : 9               //圖檔和上面邊框的距離
     });
    });
   </script>
</head>
<body>
   <table id="table0">
    <tr><th sort="true" style="width:50px;">數字</th><th sort="true">字母</th><th sort="true" style="width:100px;">日期</th><th>數字不排序</th></tr>
    <tr><td>3</td><td>a</td><td>2012/06/26</td><td>-15</td></tr>
    <tr><td>1</td><td>e</td><td>2011/06/26</td><td>60</td></tr>
    <tr><td>9</td><td>b</td><td>2011/02/26</td><td>-1</td></tr>
    <tr><td>2</td><td>g</td><td>2011/02/20</td><td>-25</td></tr>
    <tr><td>8</td><td>f</td><td>2012/02/26</td><td>10</td></tr>
    <tr><td>4</td><td>c</td><td>2012/04/20</td><td>-30</td></tr>
    <tr><td>5</td><td>i</td><td>2012/04/25</td><td>-90</td></tr>
    <tr><td>7</td><td>d</td><td>2010/04/20</td><td>66</td></tr>
    <tr><td>6</td><td>h</td><td>2012/01/20</td><td>83</td></tr>
   </table>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.