jQuery jquery排序表数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22906760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery sort table data
提问by Kurkula
I got struck in sorting tds in table using jquery.
我在使用 jquery 对表中的 tds 进行排序时感到震惊。
My Demo fiddle
我的演示小提琴
How can I call it for any table with id in my project?
我如何为我的项目中带有 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;
}
});
回答by adeneo
Something like this
像这样的东西
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);
}
could be called on any table like this
可以在任何像这样的表上调用
sortTable($('#mytable'),'asc');
回答by Irvin Dominin
I think you are missing the final "reset" function to sort the table. The desc code will not work because the order must be switched.
我认为您缺少对表格进行排序的最终“重置”功能。desc 代码将不起作用，因为必须切换顺序。
Code:
代码：
$('.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();
});
Demo: http://jsfiddle.net/7wwvL/
演示：http: //jsfiddle.net/7wwvL/
UPDATE
更新
More in general your function can be:
更一般地说，您的功能可以是：
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')
回答by M. Lak
This will done by using jquery and bootstrap with search filter just call the jquery using id. For example i used this id #example you can use this as your table id and include the jquery and datatable jquery.
这将通过使用 jquery 和 bootstrap 与搜索过滤器来完成，只需使用 id 调用 jquery。例如，我使用这个 id #example 你可以使用它作为你的表 id 并包括 jquery 和数据表 jquery。
$(document).ready(function() {
$('#example').DataTable();
} );
回答by Nicolai Dutka
Here is a modified version of the answer from Adeneo. This will sort the table based on the text in the specified column instead of only the first column. This will also look for the word "Name" in the second column and make sure that row stays on top (header row).
这是 Adeneo 答案的修改版本。这将根据指定列中的文本对表格进行排序，而不仅仅是第一列。这还将在第二列中查找单词“Name”，并确保该行保持在顶部（标题行）。
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);}
回答by efwjames
Here's a modified version of Table sorting with jquerythat works for me as a SIMPLE INTERNAL ASCENDING ROW SORTING FUNCTION
这是使用 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>回答by J Haagsman
If you have more then 10 rows the function no longer works properly. This is an updated version from @irvin-dominin
如果您有超过 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();
});
The table row will look like this, using the classname as type: making each kolom sortable on its own;
表格行看起来像这样，使用类名作为类型：使每个 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>
回答by Chris
In case people show up here looking for a table sorting function, but don't want to pull in jQuery to do it, here's an equivalent solution using browser-native code:
如果人们出现在这里寻找表格排序功能，但又不想使用 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]);
}
}
