Почему мой код разбивки на страницы JavaScript отображает количество записей, предшествующих записям на текущей странице?

Question

Я использовал Stack Overflow и другие ресурсы для компиляции ванильного JavaScript-разбиения на страницы для плагина, который я делаю. Разбивка на страницы для элементов DOM, которые динамически создаются с помощью внешнего API и затем печатаются на сайте с помощью PHP в теге «передача».

Нумерация страниц работает отлично (я использовал функцию array.from для создания массива всех элементов, созданных с помощью тега, упомянутого выше), однако, есть один небольшой нюанс, который действительно поражает меня, код, кажется, отображает количество записей, которые существуют ранее, чем на текущей странице.

Например, если я на первой странице, отображается «0» (нет записей до 1-й страницы), если я на второй странице, отображается «5» (у меня настроено отображение 5 записей на странице ), третья страница «10» и т. д.

Я уверен, что это связано с этим JavaScript, так как, когда я удаляю его вызов, номер исчезает.

Вот мой код:

var $table = document.getElementById("recents"),
$n = 5,
$rows = Array.from(document.getElementsByTagName("transfer")),
$rowCount = $rows.length,
$tr = [],
$i,$ii,$j = 0;
var $pageCount = Math.ceil($rowCount / $n);
if ($pageCount > 1) {
    for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
       $tr[$ii] = $rows[$i].outerHTML;
    $table.insertAdjacentHTML("afterend","<div id='buttons'></div");
    sort(1);
}
function sort($p) {
    var $rows = $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 btn btn-secondary");
}
function pageButtons($pCount,$cur) {
    var $prevDis = ($cur == 1)?"disabled":"",
        $nextDis = ($cur == $pCount)?"disabled":"",
        $buttons ='<div class="row w-100 mx-auto my-4">';
        $buttons += '<div class="btn-group mx-auto" role="group">';
        $buttons += "<button type='button' value='&lt;&lt; Prev' class='btn btn-secondary'  onclick='sort("+($cur - 1)+")' "+$prevDis+">&lt;&lt; Prev</button>";
    for ($i=1; $i<=$pCount;$i++)
        $buttons += "<button type='button' id='id"+$i+"'value='"+$i+"' class='btn btn-secondary'  onclick='sort("+$i+")'>"+$i+"</button>";;
        $buttons += "<button type='button' value='Next &gt;&gt;' class='btn btn-secondary' onclick='sort("+($cur + 1)+")' "+$nextDis+">Next &gt;&gt;</button>";
        $buttons += '</div>';
        $buttons += '</div>';
    return $buttons;
}

Ожидаемые результаты - это разбитый на страницы список переводов, напечатанных в элементе с идентификатором «recents», и список нажимаемых кнопок для следующих страниц, но я также получаю количество записей, предшествующих тем, что на текущей странице.

Answer 1

Вы усложняете вещи, используя:

var $rows = $s = (($n * $p)-$n);

Это устанавливает $rows равным тому, что $s установлено (т. Е. 0, 5, 10 и т. Д.), Поэтому при переходе на страницу 3 $rows инициализируется значением 10 и после добавления HTML вы ' "10<row><row><row><row><row>", в результате чего перед всеми строками появится 10.

Выполните инициализацию в одну строку каждую , чтобы сделать более понятным, что вы собираетесь делать (и чтобы ошибки, подобные этой, было легче обнаружить):

var $rows = "";
var $s = (($n * $p)-$n);