[Javascript] 讓你網頁上的表格也能自動排序

2008 年 05 月 09 日

18,579 人次

常使用網頁的表格來顯示資料的玩家們，是不是常會覺得：「要是表格的欄位也能讓使用者點選來自動排序就好了!」。現在，你不需要另外用動態網頁語言去撰寫複雜(如PHP, ASP, JSP…)的程式碼，只要再網頁中掛上一個只有17KB的Javascript程式，然後簡單修改一下網頁內容，就能讓你網頁中每個表格的欄位都能排序喔！快來試試看吧！

網頁中的表格裡面的文字、數字都是死的，無法讓我們選擇欄位來排序，除非你使用一些動態語言，得花好一番工夫才有辦法搞定一個能動態排序的表格。現在有了「sorttable」這支Javascript小程式，可以輕鬆讓你建立動態排序的表格，不需要程式設計的基礎也能用喔～

sorttable:
官方網站：http://www.kryogenix.org/code/browser/sorttable/
下載點：http://www.kryogenix.org/code/browser/sorttable/sorttable.js

使用方式

先下載檔案(sorttable.js)到網頁所在的資料夾
編輯網頁的<head>標籤，加入：
```
<script src="sorttable.js"></script>
```
```
<style type="text/css">
```
```
/* Sortable tables */
```
```
table.sortable thead {
```
```
    background-color:#eee;
```
```
    color:#666666;
```
```
    font-weight: bold;
```
```
    cursor: default;
```
```
}
```
```
</style>
```
修改表格的<table>標籤，後面加上class=”sortable” ，成為：
```
<table class="sortable">
```
存檔，大功告成！怎麼樣，簡單吧！

範例

下面是我做的範例檔(如無法正常顯示請記得開放iframe功能)：

只要點選表格的欄位名稱，就可以選擇升冪或降冪排序了，很讚吧！

使用限制

因該程式是外國人設計的，所以並不能排序中文的數字，請使用者注意。

6 意見

Moi 2008 年 05 月 13 日在 3:57 上午

frame裡面那個用Big5，外面用UTF-8，難怪Firefox 2 和IE6 都秀亂碼
csg 2008 年 05 月 13 日在 10:23 上午

不好意思沒有發現編碼的問題，已經修正了
niceday 2008 年 08 月 25 日在 3:35 下午

太感激了….有這個JS和這樣功能 …
ironman 2009 年 01 月 02 日在 2:24 下午

不過那如果有分頁有辦法排嗎?
謝謝
Scotte 2009 年 01 月 18 日在 11:03 上午

你們網站的留言板留言之後
再回覆該留言的功能是怎麼
樣的製作方式呢??

如果方便希望可以為小弟指點一下!

感激不盡!
kk 2013 年 09 月 05 日在 10:32 上午

請問使用方式的步驟1
先下載檔案(sorttable.js)到網頁所在的資料夾

要怎麼作呢可以再說明詳細一點嗎
(我用的是谷歌的部落格)