回答:
すべてのベルとホイッスルを避けたい場合は、この単純なsortElementsプラグインをお勧めします。使用法：
var table = $('table');
$('.sortable th')
.wrapInner('<span title="sort this column"/>')
.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){
if( $.text([a]) == $.text([b]) )
return 0;
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
そしてデモ。（「都市」と「施設」列見出しをクリックしてソートします）
Error: illegal characterhtmlは完全に同じではありません、私はtheadとtboyも持っています、これで私を助けていただけますか？
$.text([a]) == $.text([b])使用$.text([a]).toUpperCase() == $.text([b]).toUpperCase()する代わりに修正します。
私はこれに遭遇し、2セントで投入すると思いました。列ヘッダーをクリックすると昇順でソートされ、もう一度クリックすると降順でソートされます。
$('th').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
<tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>tdsにリンクがある場合、たとえば<a href="#">Test</a>、ソートがに関係していることに注意してください<a...。テキストのみで並べ替えるにhtml()は、最後の行をに変更する必要がありますtext()。
comparer(..)サポートする形式が正確にわかっている場合は、書き換えることができます）。それまでの間yyyy-MM-dd、「string」を使用すると、「」ソートによってデータが並べ替えられます。例：jsbin.com/pugedip/1
断然、私が使用した最も簡単な方法は、http：//datatables.net/です。
あなたは（テーブルを構築し、それを再フォーマットのDataTableをさせる、IE）DOMの代替ルートを行けば驚くほど簡単な...ちょうど使用してテーブルをフォーマットすることを確認し、次に確認してください<thead>と<tbody>か、それが動作しません。それが唯一の落とし穴です。
AJAXなどのサポートもあります。すべての非常に優れたコードと同様に、すべてのコードをオフにするのも非常に簡単です。しかし、あなたは何を使うかもしれないと驚かれることでしょう。1つのフィールドのみを並べ替える「ベア」DataTableから始めて、いくつかの機能が私がやっていることに本当に関連していることに気付きました。クライアントは新機能が大好きです。
ボーナスは、ThemeRollerを完全にサポートするためのDataTablesを指しています...
テーブルソーターでも大丈夫ですが、それほど簡単ではなく、十分に文書化されていません。機能も大丈夫です。
この洗練されたツールの使用を開始しました：https : //plugins.jquery.com/tablesorter/
その使用に関するビデオがあります：http： //www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx
$('#tableRoster').tablesorter({
headers: {
0: { sorter: false },
4: { sorter: false }
}
});
シンプルなテーブルで
<table id="tableRoster">
<thead>
<tr>
<th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
<th>User</th>
<th>Verified</th>
<th>Recently Accessed</th>
<th> </th>
</tr>
</thead>
私の答えは「注意してください」でしょう。jQueryのテーブルソートアドオンの多くは、ブラウザーに渡すもののみをソートします。多くの場合、テーブルは動的なデータのセットであり、無数のデータ行を含む可能性があることを覚えておく必要があります。
列は4つしかないことをおっしゃっていますが、さらに重要なのは、ここで説明している行数についてはおっしゃっていません。
実際のデータベーステーブルに100,000行が含まれていることを知っていて、データベースからブラウザーに5000行を渡した場合、私の質問は、テーブルを並べ替え可能にすることの意味は何ですか？適切な並べ替えを行うには、クエリをデータベースに送り返し、データベース（実際にデータを並べ替えるように設計されたツール）に並べ替えを行わせる必要があります。
しかし、あなたの質問に直接答えると、私が出会った中で最も優れたソーティングアドオンはイングリッドです。このアドオンが気に入らない理由はたくさんありますが（ "不要なベルとホイッスル..."と呼ばれます）、並べ替えの点で最高の機能の1つは、ajaxを使用していることです。並べ替えを行う前に、すべてのデータを既に渡したと仮定します。
この回答はあなたの要件に対して多すぎる（そして2年以上遅れている）と思いますが、私の分野の開発者がこの点を見落とすとイライラします。他の誰かがそれを取り上げてくれることを願っています。
気分がよくなりました。
私はこの受け入れられた答えが大好きですが、htmlをソートするための要件を取得することはめったになく、ソート方向を示すアイコンを追加する必要はありません。私はAccept回答の使用例を取り上げ、ブートストラップをプロジェクトに追加し、次のコードを追加するだけですばやく修正しました。
<div></div>
それぞれの中に<th>アイコンを設定する場所があります。
setIcon(this, inverse);
受け入れられた回答の使用法から、行の下：
th.click(function () {
そしてsetIconメソッドを追加することによって：
function setIcon(element, inverse) {
var iconSpan = $(element).find('div');
if (inverse == false) {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-up');
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-down');
}
$(element).siblings().find('div').removeClass();
}こちらがデモです。-デモを実行するには、FirefoxまたはIEでデモを実行するか、ChromeのMIMEタイプチェックを無効にする必要があります。外部リソースとして、受け入れられた回答によってリンクされたsortElementsプラグインに依存します。ちょうど頭を上げて！
これはテーブルをソートする良い方法です：
$(document).ready(function () {
$('th').each(function (col) {
$(this).hover(
function () {
$(this).addClass('focus');
},
function () {
$(this).removeClass('focus');
}
);
$(this).click(function () {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
$(this).siblings().removeClass('asc selected');
$(this).siblings().removeClass('desc selected');
var arrData = $('table').find('tbody >tr:has(td)').get();
arrData.sort(function (a, b) {
var val1 = $(a).children('td').eq(col).text().toUpperCase();
var val2 = $(b).children('td').eq(col).text().toUpperCase();
if ($.isNumeric(val1) && $.isNumeric(val2))
return sortOrder == 1 ? val1 - val2 : val2 - val1;
else
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
});
$.each(arrData, function (index, row) {
$('tbody').append(row);
});
});
});
}); table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>id</th><th>name</th><th>age</th></tr>
<tr><td>1</td><td>Julian</td><td>31</td></tr>
<tr><td>2</td><td>Bert</td><td>12</td></tr>
<tr><td>3</td><td>Xavier</td><td>25</td></tr>
<tr><td>4</td><td>Mindy</td><td>32</td></tr>
<tr><td>5</td><td>David</td><td>40</td></tr>
</table>フィドルはここにあります：https :
//jsfiddle.net/e3s84Luw/
説明はここにあります：https : //www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code
使用するものを決定するのに役立つかもしれないチャートはここにあります：http : //blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/
@Nick Grealyの回答はすばらしいrowspanですが、テーブルヘッダーセルの可能な属性を考慮していません（おそらく他の回答もそうではありません）。これはそれを修正する@Nick Grealyの回答の改善です。この回答にも基づいています（@Andrew Orlovに感謝）。
また、古いjQueryバージョンで$.isNumeric機能するように、関数をカスタム関数（@zadに感謝）に置き換えました。
これをアクティブにするclass="sortable"には、<table>タグに追加します。
$(document).ready(function() {
$('table.sortable th').click(function(){
var table = $(this).parents('table').eq(0);
var column_index = get_column_index(this);
var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
this.asc = !this.asc;
if (!this.asc){rows = rows.reverse()};
for (var i = 0; i < rows.length; i++){table.append(rows[i])};
})
});
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index);
return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function get_column_index(element) {
var clickedEl = $(element);
var myCol = clickedEl.closest("th").index();
var myRow = clickedEl.closest("tr").index();
var rowspans = $("th[rowspan]");
rowspans.each(function () {
var rs = $(this);
var rsIndex = rs.closest("tr").index();
var rsQuantity = parseInt(rs.attr("rowspan"));
if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
myCol++;
}
});
// alert('Row: ' + myRow + ', Column: ' + myCol);
return myCol;
};ソート、フィルター、およびページネーションを提供するjQueryプラグイン（ブリード）を使用できます。
HTML：
<table>
<thead>
<tr>
<th sort='name'>Name</th>
<th>Phone</th>
<th sort='city'>City</th>
<th>Speciality</th>
</tr>
</thead>
<tbody>
<tr b-scope="people" b-loop="person in people">
<td b-sort="name">{{person.name}}</td>
<td>{{person.phone}}</td>
<td b-sort="city">{{person.city}}</td>
<td>{{person.speciality}}</td>
</tr>
</tbody>
</table>JS：
$(function(){
var data = {
people: [
{name: 'c', phone: 123, city: 'b', speciality: 'a'},
{name: 'b', phone: 345, city: 'a', speciality: 'c'},
{name: 'a', phone: 234, city: 'c', speciality: 'b'},
]
};
breed.run({
scope: 'people',
input: data
});
$("th[sort]").click(function(){
breed.sort({
scope: 'people',
selector: $(this).attr('sort')
});
});
});これはブラウザをハングアップさせず、さらに簡単に設定できます：
var table = $('table');
$('th.sortable').click(function(){
var table = $(this).parents('table').eq(0);
var ths = table.find('tr:gt(0)').toArray().sort(compare($(this).index()));
this.asc = !this.asc;
if (!this.asc)
ths = ths.reverse();
for (var i = 0; i < ths.length; i++)
table.append(ths[i]);
});
function compare(idx) {
return function(a, b) {
var A = tableCell(a, idx), B = tableCell(b, idx)
return $.isNumeric(A) && $.isNumeric(B) ?
A - B : A.toString().localeCompare(B)
}
}
function tableCell(tr, index){
return $(tr).children('td').eq(index).text()
}Jamesの応答に対して、私はソート関数を変更して、より普遍的なものにします。このようにして、テキストをアルファベット順に並べ、数字を数字のように並べ替えます。
if( $.text([a]) == $.text([b]) )
return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}
else{
return parseInt($.text([a])) > parseInt($.text([b])) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}HTMLテーブルをソートする別のアプローチ。（W3.JS HTML Sortに基づく）
/* Facility Name */
$('#bioTable th:eq(0)').addClass("control-label pointer");
/* Phone # */
$('#bioTable th:eq(1)').addClass("not-allowed");
/* City */
$('#bioTable th:eq(2)').addClass("control-label pointer");
/* Specialty */
$('#bioTable th:eq(3)').addClass("not-allowed");
var collection = [{
"FacilityName": "MinION",
"Phone": "999-8888",
"City": "France",
"Specialty": "Genetic Prediction"
}, {
"FacilityName": "GridION X5",
"Phone": "999-8812",
"City": "Singapore",
"Specialty": "DNA Assembly"
}, {
"FacilityName": "PromethION",
"Phone": "929-8888",
"City": "San Francisco",
"Specialty": "DNA Testing"
}, {
"FacilityName": "iSeq 100 System",
"Phone": "999-8008",
"City": "Christchurch",
"Specialty": "gDNA-mRNA sequencing"
}]
$tbody = $("#bioTable").append('<tbody></tbody>');
for (var i = 0; i < collection.length; i++) {
$tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>');
}.control-label:after {
content: "*";
color: red;
}
.pointer {
cursor: pointer;
}
.not-allowed {
cursor: not-allowed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>
<table id="bioTable" class="w3-table-all">
<thead>
<tr>
<th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th>
<th>Phone #</th>
<th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th>
<th>Specialty</th>
</tr>
</thead>
</table>私はニックの答えを使用してしまいました（最も人気がありますが、受け入れられません）https://stackoverflow.com/a/19947532/5271220
https://stackoverflow.com/a/16819442/5271220と組み合わせましたが、アイコンやfontawesomeをプロジェクトに追加したくありませんでした。sort-column-asc / descのCSSスタイル私は色、パディング、丸みを帯びたボーダーをしました。
また、ソートできるものを制御できるように、クラスごとではなくクラスごとに移動するように変更しました。これは、テーブルが2つある場合、後でさらに便利になる可能性がありますが、さらに修正が必要になります。
体：
html += "<thead>\n";
html += "<th></th>\n";
html += "<th class=\"sort-header\">Name <span></span></i></th>\n";
html += "<th class=\"sort-header\">Status <span></span></th>\n";
html += "<th class=\"sort-header\">Comments <span></span></th>\n";
html += "<th class=\"sort-header\">Location <span></span></th>\n";
html += "<th nowrap class=\"sort-header\">Est. return <span></span></th>\n";
html += "</thead>\n";
html += "<tbody>\n"; ......さらに体を下に
$("body").on("click", ".sort-header", function (e) {
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc) { rows = rows.reverse() }
for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }
setIcon(e.target, this.asc);
});関数：
function comparer(index) {
return function (a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index) {
return $(row).children('td').eq(index).text()
}
function setIcon(element, inverse) {
var iconSpan = $(element).find('span');
if (inverse == true) {
$(iconSpan).removeClass();
$(iconSpan).addClass('sort-column-asc');
$(iconSpan)[0].innerHTML = " ↑ " // arrow up
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('sort-column-desc');
$(iconSpan)[0].innerHTML = " ↓ " // arrow down
}
$(element).siblings().find('span').each(function (i, obj) {
$(obj).removeClass();
obj.innerHTML = "";
});
}私の投票！jquery.sortElements.jsと単純なjquery
非常に単純、非常に簡単、nandhpに感謝...
$('th').live('click', function(){
var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();
switch($(this).attr('inverse')){
case 'false': inverse = true; break;
case 'true:': inverse = false; break;
default: inverse = false; break;
}
th.attr('inverse',inverse)
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(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});Dei uma melhorada docódigoOne
cod better！
すべての時間のすべてのThのすべてのテーブルの関数...見てください！
デモ
.live()ます。