本教程详细指导如何利用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结构。
<?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查询。
注意事项与最佳实践
-
安全性：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表格应用。