2013-05-06 74 views
3

我有一個包含如下內容(由「名稱」列自動排序)表整理排序後的數組

Name   Open Num Total Num 
----------------------------------- 
Doe, John   0   0 
Smith, Sarah  4   3 
Tyler, Rose  7   8 

第二tr是這樣的一個頁面:

<tr id="1"><td class="N">Smith, Sarah</td><td class="O">4</td><td class="T">3</td></tr> 

在哪裏行ID是計數器(第一行= 0,第二= 1,第三= 2等),並且單元類是使用jQuery抓取列($(".O")給出Open Num列)

我試圖讓表格根據數字列進行排序(Open NumTotal Num)。所以輸出應該是這樣的(由Open NumTotal Num排序):

Name   Open Num Total Num 
----------------------------------- 
Tyler, Rose  7   8 
Smith, Sarah  4   3 
Doe, John   0   0 

到目前爲止,我的號碼存儲到一個數組arrQuick,我存儲在不同的陣列rowCount的行號。然後,我使用快速排序方法對數據進行排序,同時對第二個數組進行排序,這非常完美。所以,現在我有排序的數據和命令,我行應當在。

的問題

我無法弄清楚如何獲得錶行更新正確。

到目前爲止,我有這個。

for(var i=0;i<rowCount.length;i++){ 
    var tmpHolder=$("#"+i).html(); 
    $("#"+i).html($("#"+rowCount[rowCount.length-(i+1)]).html()); 
    $("#"+rowCount[rowCount.length-(i+1)]).html(tmpHolder); 
} 

當逐步通過我可以看到,最初的更新工作。然而,最終它得到了一些點行更新到他們不應該的地方,我不知道爲什麼。

+0

標識不應該是唯一的數字。 – Shikiryu 2013-05-06 20:33:29

+1

ID可以是HTML5中的數字 – PSL 2013-05-06 20:35:45

+0

爲什麼不?行ID唯一使用的是此jQuery更新,因此使它們成爲數字和順序意味着我可以輕鬆地進行for循環設置。 – 2013-05-06 20:36:36

回答

2

您可以根據表格單元格的值對行進行排序。以下方法接受單元的className,並根據該單元格的文本內容對行進行排序。

$.fn.sortTable = function(cls) { 
    this.find('tr').sort(function(a, b){ 
     return $(a).find('td.'+cls).text() > $(b).find('td.' + cls).text(); 
    }).appendTo(this.find('tbody')); 
} 

$('table').sortTable('O'); 

支持升序和降序的更新方法。

$.fn.sortTable = function (opt) { 
    var sort = typeof opt.sortType !== 'undefined' ? opt.sortType : 'asc', 
     cls = opt.cls; 
    if (!cls) return; 

    var $tr = this.find('tbody').children().sort(function(a, b){ 
     return $(a).find('.' + cls).text() > $(b).find('.' + cls).text(); 
    }); 

    if (sort === 'des') { 
     $tr = $tr.toArray().reverse(); 
    } 
    this.find('tbody').append($tr); 
} 

$('table').sortTable({ 
    cls: 'N', // className of the cells 
    sortType: 'des' // order 'asc' || 'des' 
}); 

http://jsfiddle.net/Af7mG/

+0

非常優雅。有沒有辦法扭轉這種(排序降序?),並仍然保持頂部的標題行? – 2013-05-06 20:43:22

+0

@DavidStarkey我已經更新了答案。 – undefined 2013-05-06 20:55:32

+0

不幸的是,當對DESC排序時,它將標題行移動到表格的底部。爲了解決這個問題,我只是把一個表格放在這個生成的表格的上面,這個表格包含了標題,並且改變了你的藝術品以使用表格ID。它在GC和IE中似乎也有一些問題,但我喜歡FF,所以我對此很滿意。 – 2013-05-06 21:19:09