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

Question

我一直在使用Stack Overflow和其他资源为我正在制作的插件编译一个普通的JavaScript分页。分页用于DOM元素，这些元素是通过外部API动态创建的，然后用PHP以"transfer"标记打印在网站上。

分页很好(我使用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为"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);