仅使用 javascript 进行分页答案

【问题标题】：Pagination using javascript only仅使用 javascript 进行分页
【发布时间】：2021-05-07 17:46:45
【问题描述】：

我正在做一个 Django 项目

我的代码很重，我想要一种只用 javascript 进行分页的方法

首先我从 all_posts url 获取所有帖子数据

fetch('/all_posts')
    .then(response => response.json())
    .then(posts => {
        display_posts(user, posts)
    })

然后方法 display_posts 为每个帖子创建一张卡片并将其附加到 index.html 中的<div id="all_posts">

function display_posts(userr, postss){
    for (post in postss){
        //create each post_container
        //put data inside it
        document.querySelector('#all_posts').append(post_container)
    }

我不能回去用 Django 循环和 html 中的分页来做这件事，我想要一种只使用 javascript 的方法

任何人都可以帮助我，并为我提供如何使用任何插件的代码示例，在此先感谢

【问题讨论】：

如果你想在分页中显示，那么不要显示来自postss 的所有内容，而只显示其中的一部分——我不知道 JavaScript 是否对[start:start+number_of_posts_on_page] 进行了切片以仅获取部分帖子。而且您需要带有start 的变量，当您按下带有"Next Page" 的按钮时，该变量会发生变化。
你试图做什么？您在 Google 中发现了什么？至于我，你现在什么都没有，我没有看到你试图自己解决这个问题。我希望您使用 Google 更快地解决此问题，然后在 Stackoverflow 上等待答案。
看到这个codepen.io/davidofug/pen/JjYdExX?editors=0000

标签： javascript python html django pagination

【解决方案1】：

使用一些变量start、number 来分割帖子 - 即。 posts.slice(start, start+number) - 并且只显示这些帖子。

并且按钮Next Page、Prev Page 应该更改start 并再次显示来自posts.slice(start, start+number) 的帖子

原始示例。

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
</head>

<body>
<div id="all_posts"></div>

<button onclick="prev_page()">Prev Page</button>
<button onclick="next_page()">Next Page</button>

<script>
var posts = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
var start = 0;
var number = 2;

var posts_div = document.querySelector('#all_posts');

function display(posts) {
  
  // remove previous posts
  posts_div.innerHTML = '';
  
  // get only part of posts
  data = posts.slice(start, start+number);

  for(post in data){
    post_container = document.createElement('div');
    post_container.innerHTML = data[post];
    posts_div.append(post_container);
  }
}

function next_page(){
  if(start + number < posts.length){
    start = start + number;
    display(posts);
  }    
}

function prev_page(){
  if(start >= number){
    start = start - number;
    display(posts);
  }
}

// display few posts at start
display(posts);

</script>
</body>

</html>

【讨论】：

谢谢，它成功了。我尝试使用分页插件之类的硬解决方案，却忘记了我可以使用循环轻松完成，再次感谢！！