Невозможно отсортировать таблицу после добавления нумерации страниц - PullRequest
0 голосов
/ 24 января 2019

Я пытался решить эту проблему, но не смог. Моя таблица может быть отсортирована, но после добавления нумерации страниц это невозможно. <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;
}
...