html中如何设置表格分页

HTML 中如何设置表格分页

在一些需要展示大量数据的情况下，有时候我们需要将数据进行分页展示。而表格分页就是其中一种比较常见的方式。下面我们就来介绍一下在 HTML 中如何设置表格分页。

代码示例：
＜table class="table-bordered table-striped table-hover"＞
  ＜thead＞
    ＜tr＞
      ＜th＞编号＜/th＞
      ＜th＞姓名＜/th＞
      ＜th＞年龄＜/th＞
      ＜th＞性别＜/th＞
    ＜/tr＞
  ＜/thead＞
  ＜tbody＞
    ＜tr＞
      ＜td＞1＜/td＞
      ＜td＞张三＜/td＞
      ＜td＞18＜/td＞
      ＜td＞男＜/td＞
    ＜/tr＞
    //略...
  ＜/tbody＞
＜/table＞

这是一段普通的表格代码，下面我们就来详细介绍一下如何设置表格分页。

首先，我们需要一个 `div` 容器来装载表格和分页控件。

代码示例:
＜div id="pagination-container"＞
＜/div＞

然后，我们需要引入一个 jQuery 插件 `datatables.min.js`，该插件可以很方便地帮我们实现表格分页功能。

代码示例：
＜script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"＞＜/script＞

接着，在 JS 代码里我们需要做以下事情： 1、找到表格的 id，并设置表格分页控件的 id； 2、调用 `dataTable()` 方法并进行配置。

代码示例：
＜script＞
  // 找到表格的 id
  var table = ＄("#example").DataTable({
    // 设置表格分页控件的 id
    dom: 'Bfrtip',buttons: [
        'copy','csv','excel','pdf','print'
    ]
  });
＜/script＞

最后，我们只需要在页面中放置一个分页控件即可。分页控件的样式可以通过 CSS 进行自定义。

代码示例：
＜style＞
  .paginate_container {
    text-align: center;
    margin-top: 5px;
  }
  .paginate_button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #fff;
    color: #666;
    margin: 0 3px;
    cursor: pointer;
  }
  .paginate_button.active {
    background: #207adc;
    color: #fff;
    border-color: #207adc;
  }
＜/style＞
＜div class="paginate_container"＞
  ＜div class="paginate_button active"＞1＜/div＞
  ＜div class="paginate_button"＞2＜/div＞
  ＜div class="paginate_button"＞3＜/div＞
  ＜div class="paginate_button"＞4＜/div＞
  ＜div class="paginate_button"＞5＜/div＞
＜/div＞

以上就是表格分页的相关内容。通过上述代码，我们可以轻松地在 HTML 中实现表格分页的功能，方便用户浏览大量数据。