构建动态Bootstrap Table：PHP后端JSON数据接口实现指南

碧海醫心

发布时间：2025-12-07 23:46:02

811人浏览过

来源于php中文网

原创

构建动态Bootstrap Table：PHP后端JSON数据接口实现指南

本教程详细指导如何利用php和pdo从sql数据库中提取数据，并将其格式化为bootstrap table所需的json数据接口。我们将学习如何创建服务器端json端点，处理数据查询、json编码，以及在前端bootstrap table中配置`data-url`以实现动态数据加载和导出功能，从而构建一个功能完善、可交互的数据表格。

在现代Web应用开发中，动态展示数据库数据是常见需求。Bootstrap Table作为一个功能丰富的jQuery插件，提供了强大的表格功能，包括分页、排序、搜索和数据导出。它通常通过data-url属性从服务器端获取JSON格式的数据。本文将详细介绍如何使用PHP和PDO构建一个后端数据接口，将SQL数据库中的数据转换为Bootstrap Table可识别的JSON格式，并最终在前端实现动态数据表格。

理解Bootstrap Table的数据加载机制

Bootstrap Table在配置data-url属性时，会向指定的URL发送HTTP请求，并期望返回一个特定结构的JSON数据。当使用data-side-pagination="server"时，这意味着分页、排序和搜索等操作都将在服务器端处理。

Bootstrap Table期望的JSON数据结构通常包含以下字段：

total: 数据集中总记录数（未过滤）。
totalNotFiltered: 过滤后的总记录数（如果存在过滤条件）。
rows: 包含实际数据记录的数组，每条记录都是一个键值对（对象），键对应表格列的field属性。

例如，一个典型的响应可能如下所示：

立即学习“PHP免费学习笔记（深入）”；

{
  "total": 2,
  "totalNotFiltered": 2,
  "rows": [
    {
      "id": 1,
      "name": "Item 1",
      "price": "$1"
    },
    {
      "id": 2,
      "name": "Item 2",
      "price": "$2"
    }
  ]
}

第一步：构建PHP JSON数据接口

为了满足Bootstrap Table对JSON数据的需求，我们需要创建一个独立的PHP文件，作为数据接口（API端点）。

1. 设置HTTP响应头

在PHP脚本的任何输出之前，必须设置HTTP响应头，告知客户端返回的内容类型是JSON。

<?php
header('Content-type: application/json; charset=utf-8');
// ... 后续代码
?>

这确保了浏览器或JavaScript能够正确解析返回的数据。

2. 数据库查询与数据获取

使用PDO连接数据库并执行查询是获取数据的标准做法。请确保您已经建立了PDO数据库连接（例如，存储在$pdo变量中）。

为了获取表格所需的多行数据，我们应该使用fetchAll()方法，而不是fetch()，因为fetch()只返回一条记录。

<?php
// 假设 $pdo 已经是一个有效的PDO连接实例
// $user['cid'] 假设从会话或认证信息中获取
$cid = $user['cid'] ?? 1; // 示例值，实际应用中应安全获取

$statement = $pdo->prepare("SELECT id, vorname AS name, rolle AS role FROM users WHERE cid = :cid");
$statement->execute([':cid' => $cid]);
$users = $statement->fetchAll(PDO::FETCH_ASSOC); // 获取所有匹配行作为关联数组
?>

注意：

在SQL查询中，我们使用了vorname AS name和rolle AS role，这是为了让数据库返回的字段名与Bootstrap Table中columns定义的field属性（如name和role）保持一致，避免前端额外的映射。
PDO::FETCH_ASSOC确保每行数据以关联数组的形式返回，便于JSON编码。

3. 格式化为Bootstrap Table期望的JSON结构

获取到原始数据后，需要将其封装成Bootstrap Table期望的total、totalNotFiltered和rows结构。

Favird No-Code Tools

无代码工具的聚合器

下载

<?php
// ... (之前的header和数据库查询代码) ...

$data = [
    'total' => count($users), // 假设当前查询结果就是总数，如果需要完整总数，需要单独查询
    'totalNotFiltered' => count($users), // 同上
    'rows' => $users,
];

echo json_encode($data);
?>

关于total和totalNotFiltered： 在实际的服务器端分页、排序和搜索场景中，total应该代表数据库中所有符合条件（不含分页、排序、搜索）的记录总数，而totalNotFiltered则代表应用了搜索条件但未应用分页的记录总数。为了获取这两个值，通常需要执行两次查询：一次用于获取总数（COUNT(*)），另一次用于获取当前页的数据（带LIMIT和OFFSET）。对于本示例，我们简化为直接使用当前查询结果的计数。

4. 完整PHP数据接口示例

将上述步骤整合到一个名为 users_data.php 的文件中：

<?php
// users_data.php
header('Content-type: application/json; charset=utf-8');

// 假设这里进行数据库连接，例如：
// $dsn = 'mysql:host=localhost;dbname=your_database;charset=utf8';
// $username = 'your_username';
// $password = 'your_password';
// try {
//     $pdo = new PDO($dsn, $username, $password);
//     $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// } catch (PDOException $e) {
//     echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]);
//     exit();
// }

// 模拟PDO连接和用户CID
// 在实际应用中， $pdo 会是您的数据库连接对象
// $user['cid'] 会从会话或认证机制中获取
$pdo = new PDO('sqlite::memory:'); // 使用内存SQLite模拟PDO
$pdo->exec("CREATE TABLE users (id INTEGER PRIMARY KEY, vorname TEXT, rolle TEXT, cid INTEGER)");
$pdo->exec("INSERT INTO users (vorname, rolle, cid) VALUES ('John', 'Admin', 1)");
$pdo->exec("INSERT INTO users (vorname, rolle, cid) VALUES ('Jane', 'Editor', 1)");
$pdo->exec("INSERT INTO users (vorname, rolle, cid) VALUES ('Mike', 'Viewer', 2)");
$user = ['cid' => 1]; // 假设当前用户cid为1

// 从URL参数获取过滤条件（例如，minprice, maxprice），如果需要
$minPrice = $_GET['minprice'] ?? null;
$maxPrice = $_GET['maxprice'] ?? null;

$sql = "SELECT id, vorname AS name, rolle AS role FROM users WHERE cid = :cid";
$params = [':cid' => $user['cid']];

// 示例：如果需要根据价格过滤，可以添加更多WHERE条件
// if ($minPrice !== null) {
//     $sql .= " AND price >= :minprice";
//     $params[':minprice'] = $minPrice;
// }
// if ($maxPrice !== null) {
//     $sql .= " AND price <= :maxprice";
//     $params[':maxprice'] = $maxPrice;
// }

$statement = $pdo->prepare($sql);
$statement->execute($params);
$users = $statement->fetchAll(PDO::FETCH_ASSOC);

$data = [
    'total' => count($users), // 实际应用中可能需要单独查询总数
    'totalNotFiltered' => count($users),
    'rows' => $users,
];

echo json_encode($data);
?>

通过浏览器访问这个PHP文件（例如 http://yoursite.com/users_data.php），您应该能看到格式化的JSON输出。

第二步：配置Bootstrap Table前端

现在，我们将Bootstrap Table配置为从上述PHP接口获取数据。

1. 引入必要的CSS和JavaScript库

确保您的HTML文件中包含了Bootstrap、Bootstrap Table及其扩展的CSS和JS文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Table with PHP Data</title>
    <link href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.22.6/dist/bootstrap-table.min.css" rel="stylesheet">
    <style>
        #toolbar { margin: 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户列表</h1>

        <div id="toolbar" class="select">
            <select class="form-control">
                <option value="">Export Basic</option>
                <option value="all">Export All</option>
                <option value="selected">Export Selected</option>
            </select>
        </div>

        <table id="table"
          data-show-export="true"
          data-pagination="true"
          data-side-pagination="server"
          data-click-to-select="true"
          data-toolbar="#toolbar"
          data-show-toggle="true"
          data-show-columns="true"
          data-url="http://yoursite.com/users_data.php"> <!-- 注意：替换为您的PHP文件路径 -->
          <thead>
            <tr>
              <th data-field="state" data-checkbox="true" data-visible="false"></th>
              <th data-field="id" data-sortable="true">ID</th>
              <th data-field="name" data-sortable="true">姓名</th>
              <th data-field="role" data-sortable="true">角色</th>
            </tr>
          </thead>
        </table>
    </div>

    <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.22.6/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.json@1.22.6/libs/FileSaver/FileSaver.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.json@1.22.6/libs/js-xlsx/xlsx.core.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.json@1.22.6/libs/jsPDF/jspdf.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.json@1.22.6/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.22.6/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script>
      var $table = $('#table');

      $(function() {
        $('#toolbar').find('select').change(function () {
          $table.bootstrapTable('destroy').bootstrapTable({
            exportDataType: $(this).val(),
            exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
            columns: [
              {
                field: 'state',
                checkbox: true,
                visible: $(this).val() === 'selected'
              },
              {
                field: 'id',
                title: 'ID'
              }, {
                field: 'name',
                title: '姓名'
              }, {
                field: 'role',
                title: '角色'
              }
            ]
          });
        }).trigger('change');
      });
    </script>
</body>
</html>

关键配置说明：

data-url="http://yoursite.com/users_data.php"：这是指向您PHP数据接口的URL。请务必替换为您的实际路径。
data-side-pagination="server"：启用服务器端分页。这意味着Bootstrap Table会向data-url发送limit（每页记录数）和offset（偏移量）参数，服务器端需要根据这些参数返回相应的数据。
<thead> 中的 <th> 标签：
- data-field="id"、data-field="name"、data-field="role"：这些field值必须与PHP接口返回的JSON对象中的键名（例如id、name、role）完全匹配。
- data-sortable="true"：允许该列进行排序。当点击排序时，Bootstrap Table会向data-url发送sort（排序字段）和order（排序方向，asc或desc）参数。
data-show-export="true" 和 bootstrap-table-export.min.js：启用数据导出功能，允许用户将表格数据导出为多种格式。

2. 处理前端参数传递（可选）

如果您需要根据前端的用户输入（例如搜索框、筛选条件）来过滤数据，可以通过JavaScript动态修改data-url，或者利用Bootstrap Table的queryParams选项。

例如，如果您想通过URL参数传递minprice和maxprice：

<table id="table"
  ...
  data-url="http://yoursite.com/users_data.php<?=($_GET['minprice'] ? '?minprice=' . $_GET['minprice'] : '').($_GET['maxprice'] ? '&maxprice=' . $_GET['maxprice'] : '')?>">
</table>

这种PHP内嵌的方式仅在HTML文件本身也是PHP文件时有效。更常见且推荐的做法是在JavaScript中动态设置或通过queryParams回调函数来处理：

// 在Bootstrap Table初始化时，或者通过一个函数动态生成查询参数
$('#table').bootstrapTable({
    url: 'http://yoursite.com/users_data.php',
    queryParams: function(params) {
        // params 包含 limit, offset, sort, order 等
        // 您可以在这里添加自定义参数
        params.minprice = $('#minPriceInput').val(); // 假设有一个ID为minPriceInput的输入框
        params.maxprice = $('#maxPriceInput').val();
        return params;
    },
    // ... 其他配置
});

然后，在users_data.php中，您可以像之前展示的那样，通过$_GET['minprice']和$_GET['maxprice']来获取这些参数并构建SQL查询。

注意事项与最佳实践

安全性：SQL注入防护 始终使用预处理语句（Prepared Statements）和参数绑定（Parameter Binding）来执行SQL查询，如本教程中所示的PDO示例。这能有效防止SQL注入攻击。
性能：服务器端分页、排序、搜索 当数据量较大时，应在PHP后端实现完整的服务器端分页、排序和搜索逻辑。Bootstrap Table会向data-url发送以下参数：
- limit: 每页显示的记录数。
- offset: 记录的起始偏移量。
- sort: 排序字段。
- order: 排序方向（asc或desc）。
- search: 全局搜索关键字（如果启用了搜索框）。您的PHP脚本需要解析这些参数，并在SQL查询中应用LIMIT、OFFSET、ORDER BY和WHERE子句。
错误处理 在PHP后端，应妥善处理数据库连接失败、查询错误等异常情况，并向前端返回有意义的错误信息（例如，一个包含error字段的JSON对象），以便前端能够优雅地展示错误提示。
fetchAll()与fetch()的区别 请务必使用fetchAll()来获取查询结果的所有行，因为Bootstrap Table需要一个行数组来渲染表格。fetch()只会返回一行数据。
JSON编码选项json_encode()函数可以接受第二个参数，用于控制JSON编码的行为。例如，JSON_PRETTY_PRINT可以使输出更易读（在开发调试时有用），JSON_UNESCAPED_UNICODE可以防止中文字符被编码。

总结

通过遵循本文的指导，您已经学会了如何利用PHP和PDO从SQL数据库中获取数据，并将其格式化为Bootstrap Table所需的JSON数据接口。这包括设置正确的HTTP响应头、执行安全的数据库查询、将数据封装为特定JSON结构，以及在前端配置Bootstrap Table以动态加载和展示这些数据。掌握这些技术，您将能够构建功能强大、响应迅速的动态Web表格应用。

php如何批量将图片文件夹导入并生成PPT索引页

如何在 Divi 中恢复被隐藏的全局页眉与页头

如何用 SVG 实现基于小数平均值的精准星级评分显示

如何恢复 Divi 主题中被隐藏的全局页眉与页脚

如何在 Divi 主题中恢复被隐藏的全局页眉与页脚