纯js写的分页表格数据为json串

下面是详细的攻略：

步骤一：准备要显示的数据

首先我们需要准备要显示在表格中的数据，并将其封装成 JSON 数据格式。以下是一个简单的示例：

let data = [
  { id: 1, name: 'Tom', age: 20, gender: 'Male' },
  { id: 2, name: 'Jerry', age: 22, gender: 'Female' },
  { id: 3, name: 'Mike', age: 25, gender: 'Male' },
  { id: 4, name: 'Kate', age: 28, gender: 'Female' },
  { id: 5, name: 'John', age: 30, gender: 'Male' },
  { id: 6, name: 'Lucy', age: 32, gender: 'Female' }
];

步骤二：编写分页逻辑

我们需要计算总页数，并根据当前页码将数据切分成若干页。以下是一个简单的示例：

function paginate(items, pageSize, currentPage) {
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;

  const totalPages = Math.ceil(items.length / pageSize);

  return {
    currentPage: currentPage,
    totalPages: totalPages,
    totalItems: items.length,
    data: items.slice(start, end)
  };
}

const pageSize = 2; // 每页显示的项数
const currentPage = 2; // 当前页码

const paginatedData = paginate(data, pageSize, currentPage);
console.log(paginatedData);

以上代码中，我们定义了一个 paginate 函数，该函数接受三个参数：

• items：原始数据数组
• pageSize：每页显示的项数
• currentPage：当前页码

函数根据当前页码和每页显示的项数，计算出当前页应该显示的数据，并返回一个包含分页后的数据和分页信息的对象。

在上面的代码中，我们将 data 数组分成了三页，当前页是第二页。执行上面的代码后，控制台会输出如下结果：

{
  currentPage: 2,
  totalPages: 3,
  totalItems: 6,
  data: [
    { id: 3, name: 'Mike', age: 25, gender: 'Male' },
    { id: 4, name: 'Kate', age: 28, gender: 'Female' }
  ]
}

我们可以根据这个对象，渲染出对应的表格。

步骤三：渲染表格

最后一步是将分页后的数据渲染到表格中。以下是一个简单的示例：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>

<script>
const pageSize = 2; // 每页显示的项数
const currentPage = 2; // 当前页码

const paginatedData = paginate(data, pageSize, currentPage);

const tbody = document.getElementById('tbody');
paginatedData.data.forEach((item) => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td>`;
  tbody.appendChild(tr);
});
</script>

以上代码中，我们首先定义了一个包含表头和空的表体的表格。然后调用 paginate 函数，将数据分页，并提取当前页的数据。最后我们使用 forEach 方法对分页后的数据进行遍历，将每一条数据渲染成一个表格行，并添加到表格中。

当然，这只是一个最基本的示例，你可以在此基础上进一步优化分页和渲染逻辑，使其更加符合实际需求。