javascript - 为什么我的 JavaScript 分页代码显示当前页面之前的条目数？

Question

我一直在使用 Stack Overflow 和其他资源为我正在制作的插件编译普通 JavaScript 分页。分页适用于通过外部 API 动态创建的 DOM 元素，然后使用 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;
}

预期结果是打印在 ID 为“最近”的元素中的分页传输列表，以及后续页面的可点击按钮列表，但我还获得了当前页面上之前的条目数。

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