У меня есть веб-страница, содержащая таблицу HTML, и я хочу отсортировать данные при нажатии на заголовок. Я хочу использовать только vanilla javascript и jquery API.
Полный файл testpage.html.
var table = $('table');
$('#facility_header, #city_header')
.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){
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;
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
**<style>**
td, th { border: 1px solid #111; padding: 6px; }
th { font-weight: 700; }
**</style>**
</head>
<body>
<table>
<tr>
<th id="facility_header">Facility name</th>
<th>Phone #</th>
<th id="city_header">City</th>
<th>Speciality</th>
</tr>
<tr>
<td>CCC</td>
<td>00001111</td>
<td>Amsterdam</td>
<td>GGG</td>
</tr>
<tr>
<td>JJJ</td>
<td>55544444</td>
<td>London</td>
<td>MMM</td>
</tr>
<tr>
<td>AAA</td>
<td>33332222</td>
<td>Paris</td>
<td>RRR</td>
</tr>
</table>
</body>
</html>
Я хочу, чтобы когда кто-нибудь нажимал на заголовок таблицы , данные таблицы сортировались в соответствии с этим .
====================================== Редактировать ====== ==========================
**
var table = $('table');
$('#facility_header, #city_header')
.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){
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;
});
});
jQuery.fn.sortElements = (function(){
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function(){return this;};
var placements = this.map(function(){
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing its original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i){
placements[i].call(getSortable.call(this));
});
};
})();
// end script
После изменения кода он работает лучше , но иногда это приводит к неправильному потоку сортировки между Заглавными буквами и только строчными буквами ...