好久沒寫博了，一直以來都太忙了：進入到後半學期後，每週要上四次課，每天都要備課，有點時間就趕工，沒時間寫。儘管如此，剛剛解決的客戶端頁面用javascript實現的表格排序，還是要記錄下來。 

需求背景：系統中的一個統計功能，速度較慢，按照之前的做法，是通過把結果表格的表頭文字做成連結，向伺服器提交排序的列名和排序方式（升序/降序），然後重新從服務端返回結果來實現的排序。但是，這種方法無疑效率很差，加重了網路通訊和伺服器的負擔。於是考慮用javascript在客戶端頁面對結果列表排序。 

說實話，這種方法以前還真沒接觸過，上網查了一下，發現其實已經不是什麼新鮮的辦法了。能找到很多，我覺得cloudgamer做得很好（

程式碼如下： 

1、頁面呼叫的排序函式。其中sorttype=1表示降序，-1表示升序；BubbleSort為氣泡排序法。

引數：nColNum為列序號（從0開始）；strDataType為所排序的資料型別，如int、float等。

var sorttype = 1; //desc function sortByCol(nColNum,strDataType){ //排序 var table = document.getElementById("tblResult"); //定位到table上 BubbleSort(table,nColNum,strDataType,sorttype); sorttype = 0 - sorttype; //asc }

2、氣泡排序函式。

引數：table為要排序的表格；nColNum為列序號（從0開始）；strDataType為所排序的資料型別，如int、float等，函式中根據不同的資料型別，做相應的型別轉換，再比較。

其它：函式主要就是根據傳入的引數，對待排序表格（table）的指定列（nColNum），以某種資料型別（strDataType），按照指定排序方式（nSortOrder，升序/降序），以氣泡排序法排序。其中用類似“table.rows[j].cells[nColNum].childNodes[0].data”這樣的語句，取得table中某一行某個單元格中的資料。交換兩行時，呼叫Swap函式。本函式中對int、float型別的資料做了顯式轉換，根據具體需求，可繼續擴充。

需要注意的另外一點，是for(var i=1;i<length;i++)這層迴圈：由於表格的第一行是列名（表頭），故從i=1開始迴圈，而不是i=0。

function BubbleSort(table,nColNum,strDataType,nSortOrder){ //氣泡排序 var length=table.rows.length; for(var i=1;i<length;i++){ //由於表頭還有一行，故i從1開始 var exchanged=false; for(var j=length-1;j>i;j--){ switch(strDataType){ case "int": if(nSortOrder>0){ //desc if(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) > parseInt(table.rows[j-1].cells[nColNum].childNodes[0].data)){ Swap(table,j,j-1); exchanged=true; } } else{ if(parseInt(table.rows[j].cells[nColNum].childNodes[0].data) < parseInt(table.rows[j-1].cells[nColNum].childNodes[0].data)){ Swap(table,j,j-1); exchanged=true; } } break; case "float": if(nSortOrder>0){ //desc if(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) > parseFloat(table.rows[j-1].cells[nColNum].childNodes[0].data)){ Swap(table,j,j-1); exchanged=true; } } else{ if(parseFloat(table.rows[j].cells[nColNum].childNodes[0].data) < parseFloat(table.rows[j-1].cells[nColNum].childNodes[0].data)){ Swap(table,j,j-1); exchanged=true; } } break; case "string": default: if(nSortOrder>0){ //desc if(table.rows[j].cells[nColNum].childNodes[0].data.toString() > table.rows[j-1].cells[nColNum].childNodes[0].data.toString()){ Swap(table,j,j-1); exchanged=true; } } else{ if(table.rows[j].cells[nColNum].childNodes[0].data.toString() < table.rows[j-1].cells[nColNum].childNodes[0].data.toString()){ Swap(table,j,j-1); exchanged=true; } } } //switch } //for j if (!exchanged) break; } //for i }

3、交換表格行的函式。

引數：table為要交換行的表格；i、j為要交換的兩個行號。

這個函式就是充分利用了table元素的moveRow方法，實現兩行位置的交換。該方法的第一個引數是待移動的行號，第二個引數是移動目標位置的行號。這個函式移動某行後，其它行的位置會做相應調整。根據i、j大小的不同，要想達到最終交換兩行的目的，要分別做兩種不同的操作，如函式中所寫。這個過程很簡單，在紙上畫一畫就能明白了。

function Swap(table,i,j){ if(i<0 || j>table.rows.length-1) return; if(i<j){ table.moveRow(i,j); table.moveRow(j-1,i); } else{ table.moveRow(i,j); table.moveRow(j+1,i); } }

最後，在頁面上只要把表格可排序的列名做成連結呼叫sortByCol函式即可，如：

<th nowrap>
   <a href="#" onclick="sortByCol(0);">學科程式碼</a>
</th>

根據BubbleSort函式中的switch，不指定資料型別（即第二個引數）的話，就是預設按照字串型別排序。下面是指定了資料型別的：

<th nowrap>
    <a href="#" onclick="sortByCol(2,'float');">百分比(%)</a>
</th> 

再有就是，還可用快速排序等其它排序方法實現，相應演算法網上也很容易找到，做相應改造即可。

由於實際應用中，結果未分頁，故這三個函式也未實現對分頁資料的排序。

這個方法的一般性還未仔細考察，留待以後用在其它頁面上時再做。 

javascript很強大，還有很多可學的。