不调用接口,纯js实现前端报表分页

要实现前端报表分页，可以使用JavaScript来操作DOM元素，根据每页显示的数据量和总数据量，计算出需要显示多少页，然后根据当前页码，动态生成对应的分页按钮。

具体实现步骤如下：

1. 定义每页显示的数据量和当前页码。
2. 根据总数据量和每页显示的数据量，计算出共有多少页。
3. 动态生成分页按钮，通过添加、删除HTML元素来实现。
4. 监听分页按钮的点击事件，根据点击的按钮来切换当前页码。
5. 根据当前页码，计算出需要显示的数据范围，在HTML中动态生成相应的数据。

以下是一个简单的示例代码，供参考：

// 定义每页显示的数据量和当前页码
var pageSize = 10;
var currentPage = 1;

// 假设有100条数据
var total = 100;

// 根据总数据量和每页显示的数据量，计算出共有多少页
var pageCount = Math.ceil(total / pageSize);

// 动态生成分页按钮
for (var i = 1; i <= pageCount; i++) {
  var btn = document.createElement("button");
  btn.innerText = i;
  btn.onclick = function() {
    currentPage = parseInt(this.innerText);
    renderTable();
  }
  document.getElementById("page-buttons").appendChild(btn);
}

// 根据当前页码，计算出需要显示的数据范围
function getRange() {
  var start = (currentPage - 1) * pageSize;
  var end = Math.min(start + pageSize, total);
  return {start: start, end: end};
}

// 在HTML中动态生成相应的数据
function renderTable() {
  var range = getRange();
  for (var i = range.start; i < range.end; i++) {
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    cell1.innerText = "Data " + i;
    row.appendChild(cell1);
    document.getElementById("data-table").appendChild(row);
  }
}

// 初始化页面
renderTable();

在HTML中，需要有一个用于显示数据的表格，以及一个用于显示分页按钮的容器。示例代码中，我们将数据表格的ID设置为"data-table"，将分页按钮容器的ID设置为"page-buttons"。你可以根据实际情况进行修改。