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

构建动态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结构。


Magic Write

Magic Write

Canva旗下AI文案生成器

Magic Write
114


查看详情
Magic Write
 

<?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（偏移量）参数，服务器端需要根据这些参数返回相应的数据。
  • 中的

    标签：

    • 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查询。

    注意事项与最佳实践

    1. 安全性：SQL注入防护
      始终使用预处理语句（Prepared Statements）和参数绑定（Parameter Binding）来执行SQL查询，如本教程中所示的PDO示例。这能有效防止SQL注入攻击。

    2. 性能：服务器端分页、排序、搜索
      当数据量较大时，应在PHP后端实现完整的服务器端分页、排序和搜索逻辑。Bootstrap Table会向data-url发送以下参数：

      • limit: 每页显示的记录数。
      • offset: 记录的起始偏移量。
      • sort: 排序字段。
      • order: 排序方向（asc或desc）。
      • search: 全局搜索关键字（如果启用了搜索框）。
        您的PHP脚本需要解析这些参数，并在SQL查询中应用LIMIT、OFFSET、ORDER BY和WHERE子句。

    3. 错误处理
      在PHP后端，应妥善处理数据库连接失败、查询错误等异常情况，并向前端返回有意义的错误信息（例如，一个包含error字段的JSON对象），以便前端能够优雅地展示错误提示。

    4. fetchAll()与fetch()的区别
      请务必使用fetchAll()来获取查询结果的所有行，因为Bootstrap Table需要一个行数组来渲染表格。fetch()只会返回一行数据。

    5. JSON编码选项json_encode()函数可以接受第二个参数，用于控制JSON编码的行为。例如，JSON_PRETTY_PRINT可以使输出更易读（在开发调试时有用），JSON_UNESCAPED_UNICODE可以防止中文字符被编码。

    总结

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

以上就是构建动态Bootstrap Table：PHP后端JSON数据接口实现指南的详细内容，更多请关注php中文网其它相关文章！

相关标签：

css mysql php javascript word excel java jquery html js 前端 php JavaScript sql json jquery css bootstrap html 关联数组 count sort 封装 Error pdo 回调函数 数据结构 数据封装 接口 JS 对象 table th 数据库 http 应用开发

大家都在看：

https://www.php.cn/faq/1828115.html

发表回复

Your email address will not be published. Required fields are marked *