如何连接分页和分类以使其协同工作？

Question

我已将分页添加到我的表中，并且现在无法使用。我可以通过单击向上箭头来按列进行排序，向下箭头不起作用，但是更改页面后它根本不起作用，并且列向下移动，我不知道为什么。有人可以帮我解决这个问题吗？

现场直播： https://codepen.io/oleanderek/pen/bOPZrq

//////////////////////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;
}

// 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);
//selection///

document.querySelectorAll(".selectBox").forEach((el) => {
    el.addEventListener('click', showCheckboxes);
    el.addEventListener('click', changeArrow);
    el.nextElementSibling.style.display = "none";
});


function showCheckboxes() {
    var thisCheckbox = this.nextElementSibling;
    if (thisCheckbox.style.display == "none") {
        thisCheckbox.style.display = "block";
    } else {
        thisCheckbox.style.display = "none";
    }
}

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}