我在使用jquery对表中的tds进行排序时遇到了困难。
我的演示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;
}
});
答案 0 :(得分：43)
像这样的东西
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');
答案 1 :(得分：6)
我认为你错过了最后的“重置”功能来排序表。 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')
答案 2 :(得分：1)
以下是Adeneo答案的修改版本。这将根据指定列中的文本而不是仅第一列对表进行排序。这也将寻找单词＆＃34; Name＆＃34;在第二列中，确保该行保持在顶部（标题行）。
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);}
答案 3 :(得分：1)
这将通过使用jquery和bootstrap与搜索过滤器完成，只需使用id调用jquery。例如，我使用这个id #example你可以使用它作为你的表id并包含jquery和datatable jquery。
$(document).ready(function() {
$('#example').DataTable();
} );
<强> Demo Here
答案 4 :(得分：0)
这是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>
答案 5 :(得分：0)
如果您有超过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>
答案 6 :(得分：0)
如果人们出现在这里寻找表排序功能，但又不想使用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]);
}
}