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

要实现前端报表分页，可以通过以下步骤：

1. 获取报表数据，可以从后端接口获取或者直接在前端定义数据。

2. 定义每页显示的数据量，以及当前页码数。

3. 根据每页显示的数据量和当前页码，计算出需要显示的数据的起始索引和结束索引。

4. 根据起始索引和结束索引，截取需要显示的数据。

5. 将截取出来的数据渲染到页面上。

6. 添加分页功能，包括页码切换、上一页、下一页等。

以下是一个简单的示例代码：

// 定义每页显示的数据量
const pageSize = 10;

// 定义当前页码
let currentPage = 1;

// 获取报表数据，这里使用一个数组代替
const data = [
  { name: '张三', age: 18 },
  { name: '李四', age: 20 },
  { name: '王五', age: 22 },
  // ...
];

// 计算需要显示的数据的起始索引和结束索引
const startIndex = (currentPage - 1) * pageSize;
const endIndex = currentPage * pageSize;

// 截取需要显示的数据
const pageData = data.slice(startIndex, endIndex);

// 渲染数据到页面上
pageData.forEach((item) => {
  // ...
});

// 添加分页功能
function prevPage() {
  if (currentPage > 1) {
    currentPage--;
    renderPageData();
  }
}

function nextPage() {
  if (currentPage < Math.ceil(data.length / pageSize)) {
    currentPage++;
    renderPageData();
  }
}

function goToPage(page) {
  if (page >= 1 && page <= Math.ceil(data.length / pageSize)) {
    currentPage = page;
    renderPageData();
  }
}

function renderPageData() {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = currentPage * pageSize;
  const pageData = data.slice(startIndex, endIndex);
  // 渲染数据到页面上
}

在实际应用中，还可以根据需要对表格进行排序、过滤等操作。