jquery.sortElements を使用してテーブルのsorting_javascript スキルを実装する

テーブルソート機能はプロジェクトに実装する必要があります。

オンラインには多くのソリューションがあり、その多くは jQuery に基づいています。

jquery.tablesorter、サイズは 17KB、ただしそのホームページには IE10 では互換性の問題がいくつかあります。
DataTables、サイズは 75 KB、ページング、検索、その他の機能を備えた強力な機能です。
sortElements というプラグインもあります。これは非常に小さく、わずか 3 KB、互換性が高く、Github では 818 個のスターを獲得しています。

最後に、sortElements を使用することにしました。実装は非常に簡単です。

1. jQuery を導入します

コードをコピーします コードは次のとおりです。

2. sortElements.js の概要

コードをコピーします コードは次のとおりです:

3. js コード

コードをコピー コードは次のとおりです:

$(document).ready(function(){
var table = $(' #mytable');//テーブルのID
$('#sort_header')//ソートするヘッダーID
.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]) ?
反転 ? -1 : 1
}, function(){
inverse = !逆;

});


4. HTML コード


> コードをコピーします

コードは次のとおりです:

id="sort_header">施設名

td>

電話番号	都市スペシャリティ
00001111