用JavaScript编写前端分页：轻松实现数据加载

前端

2024-02-09 06:43:45

前端分页的适用场景

前端分页是一种在网页上加载大量数据时常用的技术，它可以将数据分成多个页面，然后逐页加载。这可以有效地减少初始加载时间，并使网页更具交互性。

前端分页通常适用于以下情况：

数据量较大，一次请求无法全部加载
数据需要按一定的顺序或类别进行组织
需要在网页上提供分页导航功能

前端分页的实现方法

前端分页可以通过多种方式实现，最常见的方法是使用JavaScript。

以下是一个使用JavaScript实现前端分页的代码示例：

<html>
<head>

<script src="script.js"></script>
</head>
<body>
<div id="container"></div>
<div id="pagination"></div>
</body>
</html>

<script>
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var page = 1;
var pageSize = 5;

function createPagination() {
  var pagination = document.getElementById("pagination");
  var totalPages = Math.ceil(data.length / pageSize);
  for (var i = 1; i <= totalPages; i++) {
    var button = document.createElement("button");
    button.innerHTML = i;
    button.onclick = function() {
      page = this.innerHTML;
      displayData();
    };
    pagination.appendChild(button);
  }
}

function displayData() {
  var start = (page - 1) * pageSize;
  var end = start + pageSize;
  var container = document.getElementById("container");
  container.innerHTML = "";
  for (var i = start; i < end; i++) {
    if (i < data.length) {
      var item = document.createElement("div");
      item.innerHTML = data[i];
      container.appendChild(item);
    }
  }
}

createPagination();
displayData();
</script>