Я пытался решить эту проблему, но не смог.
Моя таблица может быть отсортирована, но после добавления нумерации страниц это невозможно. <thead>
понижается после повторного нажатия, а после изменения страницы невозможно даже выполнить сортировку. Может кто-нибудь сказать мне, что не так и как это исправить, пожалуйста?
Вот живой код: https://codepen.io/oleanderek/pen/omjLXz
<section class="table-container" id="lolx">
<table id="myTable" >
<thead>
<tr>
<th>nr budynku mieszkania</th>
<th>kondygnacja</th>
<th>powierzchnia użytkowa</th>
<th>powierzchnia ogródka / strychu</th>
<th>cena brutto</th>
<th>plan</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>P11 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>wolny</td>
</tr>
<tr>
<td>P11 B</td>
<td>piętro</td>
<td>66,57 m<sup>2</sup></td>
<td>strych 15m<sup>2</sup></td>
<td>259 500 zł</td>
<td>pobierz</td>
<td>rezerwacja</td>
</tr>
<tr>
<td>P12 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>wolny</td>
</tr>
<tr>
<td>P12 B</td>
<td>piętro</td>
<td>66,57 m<sup>2</sup></td>
<td>strych 15m<sup>2</sup></td>
<td>259 500 zł</td>
<td>pobierz</td>
<td>rezerwacja</td>
</tr>
<tr>
<td>P13 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P13 B</td>
<td>piętro</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P14 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P14 B</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P15 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P15 B</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P16 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>wolny</td>
</tr>
<tr>
<td>P16 B</td>
<td>piętro</td>
<td>66,57 m<sup>2</sup></td>
<td>strych 15m<sup>2</sup></td>
<td>259 500 zł</td>
<td>pobierz</td>
<td>rezerwacja</td>
</tr>
<tr>
<td>P17 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>wolny</td>
</tr>
<tr>
<td>P17 B</td>
<td>piętro</td>
<td>66,57 m<sup>2</sup></td>
<td>strych 15m<sup>2</sup></td>
<td>259 500 zł</td>
<td>pobierz</td>
<td>rezerwacja</td>
</tr>
<tr>
<td>P18 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P18 B</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P19 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P19 B</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
<tr>
<td>P20 A</td>
<td>parter</td>
<td>64,32 m<sup>2</sup></td>
<td>ogródek 81m<sup>2</sup></td>
<td>289 500 zł</td>
<td>pobierz</td>
<td>sprzedany</td>
</tr>
</tbody>
</table>
</section>
// Table2
(function(document) {
'use strict';
var LightTableSorter = (function(Arr) {
var _th, _cellIndex, _order = '';
function _text(row) {
return row.cells.item(_cellIndex).textContent.toLowerCase();
}
function _sort(a, b) {
var va = _text(a), vb = _text(b), n = parseInt(va, 10);
if (n) {
va = n;
vb = parseInt(vb, 10);
}
return va > vb ? 1 : va < vb ? -1 : 0;
}
function _toggle() {
var c = _order !== 'asc' ? 'asc' : 'desc';
_th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
_order = c;
}
function _reset() {
_th.className = _th.className.replace('asc', '').replace('desc', '');
_order = '';
}
function onClickEvent(e) {
if (_th && _cellIndex !== e.target.cellIndex) {
_reset();
}
_th = e.target;
_cellIndex = _th.cellIndex;
var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
rows = tbody.rows;
if (rows) {
rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
if (_order === 'asc') {
Arr.reverse.call(rows);
}
_toggle();
tbody.innerHtml = '';
Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
}
}
return {
init: function() {
var ths = document.getElementsByTagName('th');
Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableSorter.init();
}
});
})(document);
//////////////////////pagination/////////////////////////////
var $table = document.getElementById("myTable"),
$n = 5,
$rowCount = $table.rows.length,
$firstRow = $table.rows[0].firstElementChild.tagName,
$hasHead = ($firstRow === "TH"),
$tr = [],
$i,$ii,$j = ($hasHead)?1:0,
$th = ($hasHead?$table.rows[(0)].outerHTML:"");
var $pageCount = Math.ceil($rowCount / $n);
if ($pageCount > 1) {
for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
$tr[$ii] = $table.rows[$i].outerHTML;
$table.insertAdjacentHTML("afterend","<div id='buttons'></div");
sort(1);
}
function sort($p) {
var $rows = $th,$s = (($n * $p)-$n);
for ($i = $s; $i < ($s+$n) && $i < $tr.length; $i++)
$rows += $tr[$i];
$table.innerHTML = $rows;
document.getElementById("buttons").innerHTML = pageButtons($pageCount,$p);
document.getElementById("id"+$p).setAttribute("class","active");
}
function pageButtons($pCount,$cur) {
var $prevDis = ($cur == 1)?"disabled":"",
$nextDis = ($cur == $pCount)?"disabled":"",
$buttons = "<input type='button' onclick='sort("+($cur - 1)+")' ";
for ($i=1; $i<=$pCount;$i++)
$buttons += "<input type='button' id='id"+$i+"'value='"+$i+"' onclick='sort("+$i+")'>";
$buttons += "<input type='button' onclick='sort("+($cur + 1)+")' ";
return $buttons;
}