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

6
15,019 人次

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

image

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

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

使用方式

  1. 先下載檔案(sorttable.js)到網頁所在的資料夾
  2. 編輯網頁的<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>
  3. 修改表格的<table>標籤,後面加上class=”sortable” ,成為:
    <table class="sortable">
  4. 存檔,大功告成!  怎麼樣,簡單吧!

範例

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

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

使用限制

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

6 意見

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

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

發表迴響