js前端分页完整代码

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

HTML部分：

<div id="dataContainer"></div>
<div id="paginationContainer"></div>

JavaScript部分：

// 模拟一个包含所有数据的数组
var data = [
  { id: 1, name: "数据1" },
  { id: 2, name: "数据2" },
  // 这里省略了一些数据...
  { id: 100, name: "数据100" }
];

var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的数据条数

// 根据当前页码和每页显示的数据条数，获取对应的数据
function getDataByPage(page, size) {
  var startIndex = (page - 1) * size; // 计算起始索引
  var endIndex = startIndex + size; // 计算结束索引
  return data.slice(startIndex, endIndex); // 使用slice方法截取对应的数据
}

// 更新页面上的数据显示
function updateData(data) {
  var container = document.getElementById("dataContainer");
  container.innerHTML = ""; // 清空旧数据

  // 遍历数据数组，创建相应的DOM元素并添加到容器中
  data.forEach(function(item) {
    var div = document.createElement("div");
    div.innerHTML = item.name;
    container.appendChild(div);
  });
}

// 更新分页按钮
function updatePagination() {
  var totalPages = Math.ceil(data.length / pageSize); // 总页数

  var container = document.getElementById("paginationContainer");
  container.innerHTML = ""; // 清空旧按钮

  // 遍历总页数，创建相应的DOM元素并添加到容器中
  for (var i = 1; i <= totalPages; i++) {
    var button = document.createElement("button");
    button.innerHTML = i;
    button.onclick = function() {
      currentPage = parseInt(this.innerHTML); // 更新当前页码
      var currentPageData = getDataByPage(currentPage, pageSize);
      updateData(currentPageData); // 更新数据显示
    };
    container.appendChild(button);
  }
}

// 初始化页面
function init() {
  var currentPageData = getDataByPage(currentPage, pageSize);
  updateData(currentPageData);
  updatePagination();
}

init(); // 调用初始化函数

以上代码实现了一个简单的前端分页功能，核心思路就是根据当前页码和每页显示的数据条数，截取相应的数据进行显示，并根据总数据量动态生成分页按钮。点击分页按钮时，更新当前页码并重新获取相应的数据进行显示。