05.02.2018, 14:54
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
рони,
вот примерно так. Правда и некогда, и лень писать, поэтому по проще и работать будет только в браузере поддерживающем Object.entries().
<html>
<head>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
}
td, th {
border: 1px solid #ddd;
padding: 5px;
}
th {
cursor: default;
padding: 6px;
background: #eee;
}
</style>
</head>
<body>
<table>
<tr>
<th id="0">Col 1</th>
<th id="1">Col 2</th>
<th id="2">Col 3</th>
<th id="3">Col 4</th>
</tr>
<tr><td>7.5</td><td>abcd</td><td>120</td><td>230</td></tr>
<tr><td>.5</td><td>txt</td><td>200</td><td>500</td></tr>
<tr><td>.18</td><td>jnr</td><td>150</td><td>180</td></tr>
</table>
<script>
var obj = [],
dir = 0,
tbl = document.querySelector('table'),
c = tbl.rows[0].cells.length,
m = c*tbl.rows.length;
sortTable();
tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
e = e.target || e.srcElement;
"TH" == e.tagName && (e = Object.entries(obj[e.id]).sort(function(a, b) {
return a[1]-b[1]
}).map(function(a) {
return a[0]
}),
sortTable(e))
});
function sortTable(e){
for(var d=c; d<m; d++) {
var a = d%c, b;
a || (b = d/c);
e ? tbl.rows[b].cells[a].textContent = obj[a][e[b-1]]
: (obj[a] || (obj[a] = {}), obj[a][b] = tbl.rows[b].cells[a].textContent)
}
}
</script>
</body>
</html>
Проще и в случае просто сделать реверс сортировки, если выбирается обратный порядок у активной колонки (последняя сортировка). Можно хранить ключи сортировки и просто реверсировать их.
Последний раз редактировалось laimas, 05.02.2018 в 15:04.
|
|
05.02.2018, 16:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
laimas,
|
|
05.02.2018, 17:33
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сортировка строк таблицы с реверсом на js
|
Сообщение от laimas
|
|
Можно хранить ключи сортировки и просто реверсировать их.
|
 ... (на всякий случай уточню, ключ создаётся только при первом клике, для каждой колонки, потом при кликах, работает только реверс ).
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
margin: 20px auto;
}
td,
th {
border: 1px solid #ddd;
padding: 5px;
}
th {
cursor: default;
padding: 6px;
background: #eee;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var tbl = document.querySelector("table"),
tbody = tbl.querySelector("tbody"),
th = [].slice.call(tbl.querySelectorAll("th"), 0),
tr = [].slice.call(tbody.querySelectorAll("tr"), 0),
td = [].slice.call(tbody.querySelectorAll("td"), 0),
obj = {};
tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
e = e.target || e.srcElement;
if ("TH" == e.tagName) {
e = th.indexOf(e);
e = obj[e] || (obj[e] = td.filter(function(a, i) {
return i == e && (e += th.length);
}).map(function(a, i) {
return [i, a.textContent];
}).sort(function(a, b) {
a = a[1];
b = b[1];
return a == +a ? b - a : b > a ? 1 : b < a ? -1 : 0;
}));
var f = document.createDocumentFragment();
e.reverse().forEach(function(a, i) {
f.appendChild(tr[a[0]]);
});
tbody.appendChild(f);
}
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>7.5</td>
<td>abcd</td>
<td>120</td>
<td>230</td>
</tr>
<tr>
<td>.5</td>
<td>txt</td>
<td>200</td>
<td>500</td>
</tr>
<tr>
<td>.18</td>
<td>jnr</td>
<td>150</td>
<td>180</td>
</tr>
</tbody>
</table>
</body>
</html>
Последний раз редактировалось рони, 05.02.2018 в 18:22.
|
|
05.02.2018, 18:11
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
ключ создаётся только при первом клике, для каждой колонки
|
Ну так о чем я и писал. Но тут уже appendChild(). |
|
05.02.2018, 18:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от laimas
|
|
Но тут уже appendChild().
|
не знаю что лучше переместить 3 строки (1 один раз, если document.createDocumentFragment() использовать, добавлено выше) или содержимое 12 ячеек поменять (что уже, вызывает вопросы, если нужна именно сортировка строк) |
|
05.02.2018, 18:27
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
не знаю что лучше переместить 3 строки ...
или содержимое 12 ячеек поменять
|
Да фиг его знает.  Я читал пост 3 темы, дошел до строки 29 кода, ну и что-то в голову стукнуло, а что если менять просто значения. Вот так и появилось, без оглядки на "зачем".
На большой таблице можно проверить что выгоднее.
PS. Хранить ключи можно только для обычной сортировки возрастание/убывание, а если потребуется пользовательская сортировка, тогда уже не получится.
Последний раз редактировалось laimas, 05.02.2018 в 18:33.
|
|
|
|
