Я попал в сортировку tds в таблице, используя jquery.
My Demo 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');
Я думаю, что вам не хватает окончательной функции сброса для сортировки таблицы. Код 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();
});
Демо: http://jsfiddle.net/7wwvL/
В общем, ваша функция может быть:
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')
Вот измененная версия ответа от 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);}
Это будет сделано с помощью jquery и bootstrap с фильтром поиска, просто вызовите jquery, используя id. Например, я использовал этот id #example, вы можете использовать его как свой идентификатор таблицы и включить jquery и datatable jquery.
$(document).ready(function() {
$('#example').DataTable();
} );
Здесь приведена измененная версия сортировки таблиц с jquery, которая работает для меня как ПРОСТОЙ ВНУТРЕННЕГО ВОЗВРАЩЕНИЯ ФУНКЦИИ ROW SORTING
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>Если у вас более 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();
});
Строка таблицы будет выглядеть так, используя имя класса как тип: создание каждого komom sortable самостоятельно;
<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]);
}
}