在本机浏览器中对表格数据进行排序

在Web应用中，数据从服务器端返回到客户端，以表格形式表现出来。如果要对数据集按指定的列排序显示，常规做法都是向服务器发出请求，服务器端程序重新从数据库中取出按指定列排序的数据，返回给客户端，页面重新显示排序后数据。

 

采用这种方式有如下缺点：

1- 响应时间延迟，每次排序都要向服务器端发送请求，等待结果返回，同时增加网络负载。

2- 编程复杂，可维护性差，而且客户端和服务器端代码耦合度很高，客户端和服务器端都要处理排序涉及的列名、排序方式，如果有分页和查询条件，都需要在客户端页面中保留，排序请求时重新传递到服务器端，当参数数量很多时极易出错。

3- 重用度很低，针对不同表格，很难抽象出一个公共程序来共用，需要逐个编写代码实现，增加工作量。

 

现在换一个角度考虑，数据既然已下载到了客户端，在重新排序时没有必要再重服务器端获取，只要对浏览器中的数据重新排序显示就可以了。要实现该目标，需要做到以下几点：

1 - 获得表格中要排序的数据，将其放入一个2维数组中。

2 - 对2维数组排序。

3 - 用排序后的数据重新更新表格。

 

利用浏览器支持的DOM(Document Object Model)和JavaScript即可实现上述目标。

 

通常页面中会很多的<table>，要获得需要排序数据所在的table，需要在<table>中增加一个id属性，便于document对象用getElementById得到该表格对象，例如要排序的表格定义如下：

 <table id="st" >

    <tr>

        <td>1</td>

        <td>2</td>

    </tr>

</table>

 

在javascript中，用var objTable = document.getElementById("st")就可得到表格对象，该对象在DOM中定义为一个Element。

 

然后用 var objRows = objTable.getElementsByTagName("tr")得到该表格中全部的行对象，ObjRows.length返回该表格行数；var rowi = objRows[i].getElementsByTagName("td")得到第i行的全部<td>节点，i从0开始计数，rowi.item(j)则可得到第i行，第j列的节点，该节点的innerHTML为该节点<td></td>之间的内容。

 

获取表格数据到2维数组的代码见源代码，此处略。

 

下面说明在javascript中2维数组的构造和排序。

javascript不支持2维数组，因此需要用数组的数组来模拟一个2维数组，其方法是先定义一个1维数组，元素个数为2维数组的行数，然后对每个元素赋一个值，值为一个数组，其元素个数为2维数组的列数。构造代码如下：

 

var rows = new Array(R);  //R为行数

for(var i = 0; i < rows.length; i++){

    rows[i] = new Array(C);    //C为列数

}

 

 

利用javascript中的Array.sort(comparer)对rows中的元素排序，比较方式由重新定义的比较函数得到。要根据第j列元素的大小排序，只要定义如下函数即可：

 

function compareCol(a,b){

   

    if (a[j] < b[j])

        return -1;

 

    if (a[j] > b[j])

        return 1;

 

   return 0;

 

}

 

因为compareCol只能有两个参数，因此j要定义为全局变量。

 

用rows.sort(compareCol)就可实现根据j列值的大小对行进行排序。根据javascript文档，字符串比较大小是按照其Unicode编码的大小来比较，对英文排序没有问题，对中文排序时就不是按通常的拼音排序，那需要javascript提供本地化支持，目前没有发现javascript此功能。该功能在java中可用java.text.Collator实现。

 

 

 以上介绍了在本地对浏览器中的数据进行排序的主要思想，为方便使用，将这些功能进行了封装，以javascript函数的提供，存放在sorttable.js文件中，在需要的页面中用<script type=text/javascript src='sorttable.js'></script>引入。

 

 

 下面说明排序函数原型和使用方法。

 

函数1 function sortTable(tableId,sortCol,compareType)

对页面中指定表格中的数据进行排序，通常第一行为标题行，排序时从第二行开始，第一次调用为升序排列，第二次为降序排列，依次轮换。

tableId    为<table id=''>中id的值，在同一个页面中要