用jquery.sortElements實作table排序_javascript技巧

專案中要實作table排序的功能。

網路上有許多解決方案，很多都是基於jQuery。

jquery.tablesorter，大小17KB，不過他的首頁在ie10下相容性有點問題。
DataTables，大小75KB，功能強大，帶分頁，搜尋等功能。
還有插件叫sortElements，很小巧，只有3KB，相容性也不錯，而且在Github上有818個星星。

最後我選擇用sortElements，實現很簡單：

1. 引入jQuery

複製代碼 程式碼如下:

2. 引入sortElements.js

複製程式碼 程式碼如下:

3. js 代碼

複製代碼程式碼如下:

$(document).ready(function(){
var table = $('#mytable');//table的id
$('#sort_header ')//要排序的headerid
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;

th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
} ).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;

});
});
});

4. html程式碼

複製程式碼

複製程式碼

複製程式碼


程式碼如下:








...

Facility name	Phone #	City	Speciality
CCC	00001111	Amsterdam	GGG