datatable src - Html (1)

📌 相关文章

📜 datatable src - Html (1)

📅 最后修改于: 2023-12-03 15:30:22.738000 🧑 作者: Mango

Datatable 的介绍

Datatable 是一个基于 jQuery 实现的表格插件，可以快速地将数据以表格形式展示出来，同时具有排序、筛选、分页等功能。Datatable 还提供了丰富的配置选项和 API，可以定制化表格的外观和功能。

Datatable 的使用

引入依赖文件

在使用 Datatable 前，需要引入 jQuery 和 Datatable 的依赖文件。可以通过 CDN 地址引入：

<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 Datatable -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap.min.js"></script>

表格结构

在 HTML 中创建表格结构，例如：

<table id="myTable" class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tom</td>
      <td>18</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jerry</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

初始化 Datatable

在 JavaScript 中进行 Datatable 的初始化和配置，例如：

$(document).ready(function() {
  $('#myTable').DataTable({
    // 配置选项
    "paging": true, // 开启分页功能
    "searching": true, // 开启搜索功能
    "ordering": true, // 开启排序功能
    "order": [[0, "asc"]], // 指定排序规则
    "language": { // 自定义语言
      "lengthMenu": "每页显示 _MENU_ 条记录",
      "zeroRecords": "没有找到记录",
      "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
      "infoEmpty": "没有记录",
      "infoFiltered": "(从 _MAX_ 条记录过滤)",
      "paginate": {
        "previous": "上一页",
        "next": "下一页"
      }
    }
  });
});

Datatable 的示例

以下是一个基于 Datatable 的示例，展示了一个简单的带有排序、筛选、分页功能的表格：

<!DOCTYPE html>
<html>
<head>
  <title>Datatable Example</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Datatable Example</h1>
    <table id="myTable" class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Tom</td>
          <td>18</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jerry</td>
          <td>20</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Mary</td>
          <td>22</td>
        </tr>
        <tr>
          <td>4</td>
          <td>John</td>
          <td>25</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Mike</td>
          <td>30</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Kate</td>
          <td>35</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#myTable').DataTable({
        "paging": true,
        "searching": true,
        "ordering": true,
        "order": [[0, "asc"]],
        "language": {
          "lengthMenu": "每页显示 _MENU_ 条记录",
          "zeroRecords": "没有找到记录",
          "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
          "infoEmpty": "没有记录",
          "infoFiltered": "(从 _MAX_ 条记录过滤)",
          "paginate": {
            "previous": "上一页",
            "next": "下一页"
          }
        }
      });
    });
  </script>
</body>
</html>

Datatable 的总结

Datatable 是一个功能强大的表格插件，可以快速地构建交互性强的数据表格。在使用 Datatable 时，需要注意使用依赖文件、创建合适的表格结构、进行合理的配置和使用 API 进行定制化处理。同时，还可以参考 Datatable 的官方文档，了解更多的配置选项和用法。