Javascript 如何应用分页以每页显示3个项目

我有一个项目清单，如下所示：

<ul id="products" class="abcd" style="display: block;">
    <li class="productslist">item1</li>
    <li class="productslist">item2</li>
    <li class="productslist">item3</li>
    <li class="productslist">item4</li>
    <li class="productslist">item5</li>
    <li class="productslist">item6</li>
    <li class="productslist">item7</li>
    <li class="productslist">item8</li>
    <li class="productslist">item9</li>
    <li class="productslist">item10</li>
    <li class="productslist">item11</li>
    <li class="productslist">item12</li>
    <li class="productslist">item13</li>
</ul>

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项
第11项
第12项
第13项

---

现在，我需要在应用分页后每页显示3个项目。请帮助我学习Javascript。

这个问题相当广泛，但是考虑到这个解决方案对于较长的列表来说不是一个很好的解决方案，下面的代码将帮助您了解该怎么做

const list=[…document.querySelectorAll（'.productslist'）；
让计数=0；
每页的常数项=3；
const pagination_numbers_container=document.querySelector（'.pagination numbers'）；
常数paginate=（p）=>{
希德尔（）；
如果（p=='next'）计数+=每页的项目数；
否则，如果（p==='previous'）计数-=每页的项目数；
else计数=p；
如果（计数<0）计数=0；
否则，如果（计数>=（list.length-items\u/页））计数=（list.length-items\u/页）+（list.length+1）%items\u/页）；
对于（让i=计数；i<（每页计数+项目）；i++）{
if（list[i]）list[i].style.display='block'；
}
}
常数paginateNumberClickHandler=（evt）=>{
const page=parseInt（evt.currentTarget.getAttribute（'data-page'）；
分页（每页*项目）
}
const createPaginationNumber=（）=>{
const total_pages_rest=list.length%每页项目数；
const total_pages=（list.length/每页项目数）；
常数分页_数=[]；
分页_number_container.innerHTML=''；
对于（设i=0；i<总页数；i++）{
分页_numbers_container.innerHTML+=`${i+1}`；
}
[…document.queryselectoral（'.pag'）].forEach（（p）=>p.addEventListener（'click'，paginateNumberClickHandler））；
}
const hideAll=（）=>list.forEach（（l）=>l.style.display='none'）；
const next=document.querySelector（'.next'）；
const previous=document.querySelector（'.previous'）；
next.addEventListener（'click'，（e）=>paginate（“next”）；
previous.addEventListener（'click'，（e）=>paginate（“previous”）；
分页（0）；
CreatePaginationNumber（）

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项
第11项
第12项
第13项

以前的
下一个
非常感谢@gugateider的回答。这对我理解逻辑真的帮助很大。现在我可以在我的代码中应用了。我面临的唯一问题是，当继续单击“下一步”按钮时，它会在到达最后一组后显示第一组。你能帮个忙吗？不客气，我希望你能理解分页项目的逻辑。基本上，您只需要编辑
else if
条件。我已经更新了答案，看一看，我正在尝试在“上一个”和“下一个”按钮之间实现页面编号，但无法像1 2 3那样重复编号，只是想知道在上面的示例中是否可能？是的，这是可能的，您只需要确保此列表不会太大，如果是这样，我建议您动态加载此数据。我已经根据你的需要更新了答案。