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

为什么我的JavaScript分页代码显示当前页面上的条目数之前的条目数?,javascript,pagination,Javascript,Pagination,我一直在使用堆栈溢出和其他资源为我正在制作的插件编译一个普通JavaScript分页。分页用于DOM元素,这些元素通过外部API动态创建,然后使用PHP在站点上以“transfer”标记打印 分页工作得很好(我使用array.from函数创建了一个包含使用上述标记创建的所有元素的数组),但是,有一点细微差别确实让我难以置信,代码似乎显示了当前页面上存在的条目数之前的条目数 例如,如果我在第一页,它显示“0”(在第1页之前没有条目),如果我在第二页,它显示“5”(我设置为每页显示5条条目),第三页

我一直在使用堆栈溢出和其他资源为我正在制作的插件编译一个普通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;
}
var$table=document.getElementById(“最近”),
$n=5,
$rows=Array.from(document.getElementsByTagName(“传输”),
$rowCount=$rows.length,
$tr=[],
$i,$ii,$j=0;
var$pageCount=Math.ceil($rowCount/$n);
如果($pageCount>1){
对于($i=$j,$ii=0;$i<$rowCount;$i++,$ii++)
$tr[$ii]=$rows[$i].outerHTML;

$table.insertAdjacentHTML(“afterend”,“您使用以下命令使事情变得复杂:

var $rows = $s = (($n * $p)-$n);
这将
$rows
设置为等于
$s
设置为的任何值(即0、5、10等),因此当您在第3页
$rows
上时,将初始化为10,并在附加HTML后,将有
“10”
结果是10出现在所有行之前

在每行上做一次初始化,以便更清楚地知道你打算做什么(并且更容易发现这样的错误):


听起来您在使用显示当前页面信息的元素(如“当前查看项目11-15”)时遇到了问题,但我只看到分页按钮的代码。您能解释一下您当前得到的是什么吗(比如说“数字为0的分页按钮”而不是“它显示0”,因为我知道您在说什么)。谢谢你的输入。我只为分页添加了JS,因为我已经通过消除顺序确定了特定的代码块是问题所在。再次感谢你的帮助,非常感谢。就是这样!非常感谢你,我知道我做了一些简单而愚蠢的事情。真的改变了那件事行到:var$rows='';var$s=($n*$p)-$n);它现在不显示数字。谢谢!
var $rows = "";
var $s = (($n * $p)-$n);