JS代码实现table数据分页效果

下面是JS代码实现table数据分页的完整攻略。

1. 为什么需要table数据分页

当我们在网页上展示大量数据的时候，如果直接呈现所有数据，会导致页面太长，用户体验不佳，同时会严重影响页面的加载速度和用户体验。因此，通常需要使用table数据分页的方式，将数据分成多页，让用户能够快速地定位到所需要的数据。

2. 如何实现table数据分页

实现table数据分页的核心代码是使用JavaScript来处理数据并生成HTML代码。具体实现步骤如下：

2.1 准备数据

在准备数据时，我们需要获取需要展示的数据，计算总页数等。代码示例：

var data = [
  {id: 1, name: '张三', age: 18},
  {id: 2, name: '李四', age: 20},
  {id: 3, name: '王五', age: 22},
  {id: 4, name: '赵六', age: 30},
  {id: 5, name: '钱七', age: 28},
  {id: 6, name: '孙八', age: 25},
  {id: 7, name: '周九', age: 21},
  {id: 8, name: '吴十', age: 19},
];
//设置每页显示的数据条数
var pageSize = 3;
//计算总页数
var totalPages = Math.ceil(data.length / pageSize);

2.2 创建HTML代码

在创建HTML代码时，我们需要根据每一页的数据来生成对应的HTML代码，并添加到页面上。代码示例：

function createTable (pageIndex) {
  //获取当前页需要展示的数据
  var start = pageIndex * pageSize;
  var end = start + pageSize;
  var currentPageData = data.slice(start, end);
  //清空原来的table数据
  var tableBody = document.getElementById('tableBody');
  tableBody.innerHTML = '';
  //创建新的table数据
  for (var i = 0; i < currentPageData.length; i++) {
    var rowHtml = '<tr><td>' + currentPageData[i].id + '</td><td>' + currentPageData[i].name + '</td><td>' + currentPageData[i].age + '</td></tr>';
    tableBody.innerHTML += rowHtml;
  }
}

2.3 创建分页效果

在创建分页效果时，我们需要根据当前页和总页数来生成分页按钮，并绑定分页事件，让用户可以通过点击分页按钮来切换不同的页数。代码示例：

function createPager () {
  //获取分页容器
  var pager = document.getElementById('pager');
  //清空原有的分页按钮
  pager.innerHTML = '';
  //生成新的分页按钮
  for (var i = 0; i < totalPages; i++) {
    var btn = document.createElement('button');
    btn.textContent = i + 1;
    if (i === 0) {
      btn.classList.add('active');
    }
    btn.addEventListener('click', function () {
      //设置当前页为点击的页数
      var pageIndex = parseInt(this.textContent) - 1;
      //更新数据和分页按钮
      createTable(pageIndex);
      updatePager(pageIndex);
    });
    pager.appendChild(btn);
  }
}
//更新当前页的激活状态
function updatePager (pageIndex) {
  var pager = document.getElementById('pager');
  for (var i = 0; i < pager.children.length; i++) {
    if (i === pageIndex) {
      pager.children[i].classList.add('active');
    } else {
      pager.children[i].classList.remove('active');
    }
  }
}

3. 完整示例代码

下面是一个完整的示例代码，包含了数据准备、HTML代码生成和分页效果的实现：

HTML部分：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!--动态生成的table数据-->
  </tbody>
</table>
<div id="pager">
  <!--动态生成的分页按钮-->
</div>

JS部分：

var data = [
  {id: 1, name: '张三', age: 18},
  {id: 2, name: '李四', age: 20},
  {id: 3, name: '王五', age: 22},
  {id: 4, name: '赵六', age: 30},
  {id: 5, name: '钱七', age: 28},
  {id: 6, name: '孙八', age: 25},
  {id: 7, name: '周九', age: 21},
  {id: 8, name: '吴十', age: 19},
];
var pageSize = 3;
var totalPages = Math.ceil(data.length / pageSize);
//生成table数据和分页按钮
createTable(0);
createPager();
//生成table数据
function createTable(pageIndex) {
  var start = pageIndex * pageSize;
  var end = start + pageSize;
  var currentPageData = data.slice(start, end);
  var tableBody = document.getElementById('tableBody');
  tableBody.innerHTML = '';
  for (var i = 0; i < currentPageData.length; i++) {
    var rowHtml = '<tr><td>' + currentPageData[i].id + '</td><td>' + currentPageData[i].name + '</td><td>' + currentPageData[i].age + '</td></tr>';
    tableBody.innerHTML += rowHtml;
  }
}
//生成分页按钮
function createPager() {
  var pager = document.getElementById('pager');
  pager.innerHTML = '';
  for (var i = 0; i < totalPages; i++) {
    var btn = document.createElement('button');
    btn.textContent = i + 1;
    if (i === 0) {
      btn.classList.add('active');
    }
    btn.addEventListener('click', function () {
      var pageIndex = parseInt(this.textContent) - 1;
      createTable(pageIndex);
      updatePager(pageIndex);
    });
    pager.appendChild(btn);
  }
}
//更新分页按钮
function updatePager(pageIndex) {
  var pager = document.getElementById('pager');
  for (var i = 0; i < pager.children.length; i++) {
    if (i === pageIndex) {
      pager.children[i].classList.add('active');
    } else {
      pager.children[i].classList.remove('active');
    }
  }
}

以上就是JS代码实现table数据分页的完整攻略。