页面表格实现不刷新排序 - javaScript

页面表格实现不刷新排序

一．预备知识：

Javascript 的 sort(sortBy)方法：

sortBy( )规定排序规则，其必须是函数，而这个函数通常由我们根据排序规则自己进行编写。

arrayObject.sort(sortBy) :  数组对象调用带有sortBy 参数的sort() 方法，则会返回排序完成后的数组。

如果sort（）函数不加 sortBy 函数， 即array.sort()  则对array 的元素按照字符编码的顺序进行排序，排序规则如下：

先判断两个数组元素的首位，如果相同，则再判断数组元素的第二位。。。

例如

对于一个包含了George,John,Thomas,James,Adrew,Martin  的数组array，进行 array.sort() 之后排序的结果是：       

Adrew,George,James,John,Martin,Thomas

对于  { 10,5,40,25,1000,1}   的数组array，进行array.sort()排序后的结果是：

1,10,1000,25,40,5

 

如果希望 排序的结果是  1,5,10,25,40,100，则需要自己编写sortBy 函数：

function sortBy(a,b){

return a -b;

}

这个sortBy()  的排序规则是进行数值比较。而整个数组排序后的结果是数值小的元素在数组前面。下面是javascript 代码及执行结果：

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

function sortBy(a,b){

return a - b;

}

document.write(arr.sort(sortBy)) 

结果输出：

 

 

 

 

sortBy()函数实现了两个数组元素以什么样的方式来表示大小。Sort() 则根据sortBy的比较方法来实现排序。至于用什么排序算法来实现，不同浏览器可能用不同的排序算法来实现。

 

二． 实现表格排序的流程：

1. 编写sortBy 函数

在这里我们根据表格的某一列的值通过预定的排序方法对所有行进行排序。排序方法是按每行中某列值按照数值大小，或按照字符串大小排序。

在写的DEMO中，先拿按student_id 列排序作为例子：

首次点击"student_id"时，会将表格按照student_id 进行升序排序，再次点击“student_id”时，则表格按照 student_id进行降序排序。事实上将每行中studeng_id的值作为表格每行进行排序的依据。

我们看到student_id 列都是一些数字，那么下面的比较函数中，就是通过比较tr 中的student_id值来判断tr1 和 tr2 的大小关系。

function student_id_asc(tr1,tr2){

value1 = tr1.cells[2].innerHTML;	//获取tr1 中 student_id 列的内容
value2 = tr2.cells[2].innerHTML;	//获取tr2 中 student_id 列的内容
return value1 - value2;	1: value1大     -1:value2 大     0:相等

}

 

对于student_name 列排序则有一些变化：

function student_name_asc(tr1,tr2){

value1 = tr1.cells[3].firstChild.innerHTML;        

value2 = tr2.cells[3].firstChild.innerHTML;

return value1.localeCompare(value2);

}

首先student_name类中的姓名是红色的，这里我使用<span>将姓名包裹了一层，并在<span>标签里设置了红色。要取到学生姓名，则要稍微复杂一点点。

其次，学生姓名都是英文字符串，不能通过单纯的比较数值的方式来判定大小。这里我们使用一Javascript 中的String对象中的localeCompare()  方法来判定两个学生姓名的大小：

stringObject.localeCompare(target)  方法，通过本地的特定的顺序来比较两个字符串。

 

2.     对表格进行排序：

                i.              建立数组

将TBODY 中的每一行作为一个单独的元素存放到数组trArray中。（javascript 的sort()方法只能被数组使 用，THEAD 中的一行数据作为表格头信息不参与排序。 ）

              ii.              trArray数组进行排序

trArray.sort(sortBy)

排序完成后trArray就是一个排序完成的数组。

            iii.              将排序完的trArray中的所有 tr元素冲洗插入到表格中

a.       将trArray 中的tr 元素重新插入到TBODY

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

tbody.appendChild(trArray[i]);

}

b.      网络上有类似的方法来实现将将trArray 中的tr 元素重新插入到TBODY中，并且有人证明了这种插入方法效率高了一倍：

var fragment = document.createDocumentFragment();  //新建一个代码片段，用于保存排序后的结果

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

fragment.appendChild(trValue[i]);

}

tbody.appendChild(fragment)

 

 

 PS: 附件里有个小例子。希望对大家有帮助