如何通過javascript/jquery對錶行進行排序？

Question

說我有這個網站：

<table> 
    <tr> 
    <th>Sort Order</th> 
    <th>Name</th> 
    </tr> 

    <tr class="item" id="item_1"> 
    <td class="sortorder">1</td> 
    <td>ABC</td> 
    </tr> 

    <tr class="item" id="item_2"> 
    <td class="sortorder">2</td> 
    <td>DEF</td> 
    </tr> 

    <tr class="item" id="item_3"> 
    <td class="sortorder">3</td> 
    <td>XYZ</td> 
    </tr> 
</table> 

我要的是用戶是能夠在表中的行進行排序（不包括第一行與<th> S，所以用類.item所有行）通過拖放它們，然後更新它們的排序順序。

E.g如果用戶拖動DEF到第一位置和ABC代替它，我想DEF的排序順序說1，和美國廣播公司說，而不是2。

這怎麼辦？

如果需要，我可以有單獨存儲在一個javascript數組中的所有項目或超過他們反對這樣我就可以循環和更新，每當用戶更改排序順序每個項目的排序順序。

Answer 1

您可以使用jQuery UI的排序列表。它在瀏覽器中得到很好的支持，並有許多選項和回調。他們在他們的例子中使用了一個列表，但您可以輕鬆使用一個表格。

jQuery用戶界面可排序的文檔 - http://jqueryui.com/demos/sortable/
可排序教程/指南 - http://www.petefreitag.com/item/736.cfm

實施例：

$('table').sortable({ 
    items : '.item', 
    update : function(event, ui) 
    { 
     alert('sort order updated'); 

     // Display sort order - also checkout serialize() method in jQuery UI Docs 
     alert('sort order: ' + $(this).sortable('toArray').toString()); 
    } 
}); 

Answer 2

有幾種，已寫入的表排序的插件的jQuery：

• http://tablesorter.com/docs/
• 對http://www.datatables.net/index
• 別人呢？