我对使用 jquery 对表中的 td 进行排序感到震惊。
我的演示fiddle
如何在我的项目中为任何具有 id 的表调用它？
var $sort = this;
var $table = $('#mytable');
var $rows = $('tbody > tr',$table);
$rows.sort(function(a, b) {
var keyA = $('td:eq(0)',a).text();
var keyB = $('td:eq(0)',b).text();
if($($sort).hasClass('asc')) {
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA < keyB) ? 1 : 0;
}
});
【问题讨论】：
类似的东西
function sortTable(table, order) {
var asc = order === 'asc',
tbody = table.find('tbody');
tbody.find('tr').sort(function(a, b) {
if (asc) {
return $('td:first', a).text().localeCompare($('td:first', b).text());
} else {
return $('td:first', b).text().localeCompare($('td:first', a).text());
}
}).appendTo(tbody);
}
可以在任何这样的表上调用
sortTable($('#mytable'),'asc');
【讨论】：
111在2之前出现
我认为您缺少对表格进行排序的最终“重置”功能。由于必须切换顺序，因此 desc 代码将不起作用。
代码：
$('.sort').click(function (e) {
var $sort = this;
var $table = $('#mytable');
var $rows = $('tbody > tr', $table);
$rows.sort(function (a, b) {
var keyA = $('td', a).text();
var keyB = $('td', b).text();
if ($($sort).hasClass('asc')) {
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA > keyB) ? 0 : 1;
}
});
$.each($rows, function (index, row) {
$table.append(row);
});
e.preventDefault();
});
更一般地说，您的功能可以是：
function sortTable($table,order){
var $rows = $('tbody > tr', $table);
$rows.sort(function (a, b) {
var keyA = $('td', a).text();
var keyB = $('td', b).text();
if (order=='asc') {
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA > keyB) ? 0 : 1;
}
});
$.each($rows, function (index, row) {
$table.append(row);
});
}
sortTable($('#mytable'),'asc')
【讨论】：
这是 Table sorting with jquery 的修改版本，它适用于我作为简单的内部升序行排序功能
var $tbody = $('#mytable tbody');
$tbody.find('tr').sort(function(a, b) {
var tda = $(a).attr('data-order'); // target order attribute
var tdb = $(b).attr('data-order'); // target order attribute
// if a < b return 1
return tda > tdb ? 1
// else if a > b return -1
: tda < tdb ? -1
// else they are equal - return 0
: 0;
}).appendTo($tbody);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr data-order="4">
<td>d</td>
</tr>
<tr data-order="2">
<td>b</td>
</tr>
<tr data-order="1">
<td>a</td>
</tr>
<tr data-order="3">
<td>c</td>
</tr>
</tbody>【讨论】：
这将通过使用 jquery 和带有搜索过滤器的引导程序来完成，只需使用 id 调用 jquery。例如我使用了这个 id #example 你可以用它作为你的表 id 并包括 jquery 和 datatable jquery。
$(document).ready(function() {
$('#example').DataTable();
} );
【讨论】：
这是 Adeneo 答案的修改版本。这将根据指定列中的文本对表格进行排序，而不仅仅是第一列。这还将在第二列中查找“名称”一词，并确保该行位于顶部（标题行）。
function SortTable(table, order, nr) {
var asc = order === 'asc',
tbody = table.find('tbody');
tbody.find('tr').sort(function (a, b) {
if ($('td:nth-child('+ nr +')', a).text() == "Name") return $('td:nth-child('+ nr +')', a).text();
else if (asc) {
return $('td:nth-child('+ nr +')', a).text().localeCompare($('td:nth-child('+ nr +')', b).text());
} else {
return $('td:nth-child('+ nr +')', b).text().localeCompare($('td:nth-child('+ nr +')', a).text());
}
}).appendTo(tbody);}
【讨论】：
如果您的行数超过 10 行，则该功能将无法正常工作。 这是来自@irvin-dominin 的更新版本
$('.js_sortme').click(function (e) {
var $sort = this;
var $table = $('#floorplan-table-list');
var $rows = $('tbody > tr', $table);
var $type = $($sort).attr('data-type');
if ($($sort).hasClass('asc')) {
$('.js_sortme', $table).removeClass('desc');
$('.js_sortme', $table).removeClass('asc');
$('.js_sortme', $table).removeClass('active');
$($sort).addClass('desc');
$($sort).addClass('active');
} else {
$('.js_sortme', $table).removeClass('desc');
$('.js_sortme', $table).removeClass('asc');
$('.js_sortme', $table).removeClass('active');
$($sort).addClass('asc');
$($sort).addClass('active');
}
$rows.sort(function (a, b) {
var keyA = parseInt($('td.'+$type+'', a).attr('data-position'));
var keyB = parseInt($('td.'+$type+'', b).attr('data-position'));
if ($($sort).hasClass('asc')) {
var result = keyA - keyB;
if (result !== 0) { return result; }
// Fetch secondary keys
keyA = parseInt( $('td.'+$type+'', a).attr('data-position') );
keyB = parseInt( $('td.'+$type+'', b).attr('data-position') );
return keyA - keyB;
} else {
var result = keyB - keyA;
if (result !== 0) { return result; }
// Fetch secondary keys
keyA = parseInt( $('td.'+$type+'', a).attr('data-position') );
keyB = parseInt( $('td.'+$type+'', b).attr('data-position') );
return keyB - keyA;
}
});
$.each($rows, function (index, row) {
$table.append(row);
});
e.preventDefault();
});
表格行将如下所示，使用类名作为类型：使每个 kolom 可自行排序；
<tr>
<td class="A" data-position="1">a-value-1</td>
<td class="B" data-position="3">b-value-3</td>
</tr>
<tr>
<td class="A" data-position="2">a-value-2</td>
<td class="B" data-position="2">b-value-2</td>
</tr>
<tr>
<td class="A" data-position="3">a-value-3</td>
<td class="B" data-position="1">b-value-1</td>
</tr>
【讨论】：
如果人们出现在这里寻找表格排序功能，但不想引入 jQuery 来完成它，这里有一个使用浏览器原生代码的等效解决方案：
function sortTable(table, order, selector) {
selector = selector || 'th:first-child, td:first-child';
var asc = order === 'asc';
var tbody = table.querySelector('tbody') || table;
var nodes = tbody.querySelectorAll('tr');
var sortedNodes = Array.prototype.slice.apply(nodes);
sortedNodes.sort(function (a, b) {
var textA = a.querySelector(selector).textContent;
var textB = b.querySelector(selector).textContent;
if (asc) {
var temp = textB;
textB = textA;
textA = temp;
}
return textA.localeCompare(textB);
});
tbody.textContent = '';
for (var i = 0; i < sortedNodes.length; i++) {
tbody.appendChild(sortedNodes[i]);
}
}
【讨论】：