bootstrap ajax table(示例代码)

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

Bootstrap Ajax Table是基于Bootstrap框架的一种表格插件，它可以通过Ajax技术实现动态加载数据和实时更新表格内容。使用Bootstrap Ajax Table可以方便地展示和管理大量的数据。

我们需要在HTML文件中引入Bootstrap和jQuery库。然后，我们可以创建一个表格容器，使用Bootstrap的table类来设置表格的样式。接下来，我们需要使用jQuery的Ajax方法来获取数据，并将数据填充到表格中。

示例代码如下所示：


<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Ajax Table</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="2563-e5f0-6770-7e2e container">
    <h1>Bootstrap Ajax Table</h1>
    <table id="myTable" class="e5f0-6770-7e2e-383a table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: 'data.json', // 数据接口的URL
        dataType: 'json', // 数据类型
        success: function(data) { // 成功获取数据后的回调函数
          var tableBody = $('#myTable tbody'); // 获取表格的tbody元素
          $.each(data, function(index, item) { // 遍历数据
            var row = $('<tr>'); // 创建表格行
            row.append($('<td>').text(item.id)); // 创建单元格，并填充数据
            row.append($('<td>').text(item.name));
            row.append($('<td>').text(item.email));
            tableBody.append(row); // 将行添加到表格中
          });
        }
      });
    });
  </script>
</body>
</html>

在上述示例代码中，我们首先引入了Bootstrap和jQuery的库文件。然后，我们创建了一个包含表格的容器，并使用Bootstrap的table类来设置表格的样式。

接着，我们使用jQuery的Ajax方法来发送一个GET请求，获取名为"data.json"的JSON格式数据。在成功获取数据后，我们使用$.each方法遍历数据，并创建表格行和单元格，然后将数据填充到单元格中，并将行添加到表格的tbody元素中。

通过以上步骤，我们就可以使用Bootstrap Ajax Table插件来展示动态加载的数据，并实现实时更新表格内容的效果。

bootstrap ajax table(示例代码)

相关阅读