本教程详细介绍了如何将sql数据库中的数据通过php动态生成json格式，并无缝集成到bootstrap table中，以实现服务器端分页、排序和数据导出功能。我们将重点讲解php后端json接口的构建、数据格式的规范化以及前端bootstrap table的配置，确保数据能够正确加载并支持高级交互特性。
1. 引言：Bootstrap Table与服务器端数据集成
Bootstrap Table是一个功能丰富的表格插件，提供了分页、排序、搜索和数据导出等多种功能。当处理大量数据时，为了提高性能和用户体验，通常需要采用服务器端分页（data-side-pagination="server"）模式。这意味着表格数据不会一次性全部加载到客户端，而是由服务器根据客户端请求（如当前页码、每页记录数、排序字段等）动态返回所需的数据子集。
这种模式下，Bootstrap Table通过data-url属性指定一个API端点，该端点负责从数据库获取数据并以特定JSON格式返回。本教程将指导您如何构建这样的PHP后端接口，将SQL数据库中的数据转换为Bootstrap Table可识别的JSON格式。
2. 理解问题：为什么直接嵌入JSON无效？
初学者常犯的一个错误是尝试将PHP生成的JSON直接嵌入到HTML的data-url属性中，例如：
<table id="table" data-url="<?=json_encode($users)?>"></table>登录后复制
这种做法是错误的，因为data-url属性期望的是一个URL地址，而不是实际的JSON数据。当Bootstrap Table初始化时，它会向data-url指定的地址发起一个AJAX请求，并期望从该地址获取JSON响应。因此，我们需要创建一个独立的PHP文件作为数据接口，让data-url指向这个PHP文件的URL。
3. 构建PHP JSON数据接口
要实现服务器端数据集成，核心是创建一个PHP文件，该文件负责：
从SQL数据库查询数据。将查询结果格式化为Bootstrap Table期望的JSON结构。设置正确的HTTP响应头。3.1 PHP后端接口文件（users_data.php）
创建一个名为users_data.php（或任何您喜欢的名称）的PHP文件，并添加以下内容：
<?php// 1. 设置HTTP响应头为JSonheader('Content-type: application/json; charset=utf-8');// 2. 数据库连接（请替换为您的实际数据库连接代码）// 假设 $pdo 已经是一个有效的PDO对象try { $dsn = 'mysql:host=localhost;dbname=your_database_name;charset=utf8'; $username = 'your_username'; $password = 'your_password'; $pdo = new PDO($dsn, $username, $password, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, // 默认以关联数组形式返回 ]);} catch (PDOException $e) { // 生产环境中不应直接暴露错误信息，可记录日志并返回通用错误 echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]); exit();}// 3. 模拟用户CID（实际应用中可能从会话或请求参数获取）// 假设 $user['cid'] 是当前用户的ID$user_cid = 1; // 示例值，请根据实际情况调整// 4. 从数据库查询数据// 注意：对于服务器端分页，您需要根据客户端传递的参数（limit, offset, sort, order, search）来构建SQL查询// 这里为了简化，先查询所有数据，实际应用中需要加入LIMIT, OFFSET等$statement = $pdo->prepare("SELECt id, vorname, rolle FROM users WHERe cid = :cid");$statement->execute([':cid' => $user_cid]);$users = $statement->fetchAll(PDO::FETCH_ASSOC); // 使用 fetchAll 获取所有匹配行// 5. 格式化数据为Bootstrap Table期望的JSON结构// Bootstrap Table在服务器端分页模式下期望的JSON结构通常包含 'total' 和 'rows'$data = [ 'total' => count($users), // 总记录数 'totalNotFiltered' => count($users), // 未过滤的总记录数（如果实现了搜索功能，这里会有不同） 'rows' => $users, // 当前页的数据行数组];// 6. 输出JSON数据echo json_encode($data);?>header('Content-type: application/json; charset=utf-8');: 这一行至关重要，它告诉浏览器和Bootstrap Table，此响应的内容类型是JSON。数据库连接: 替换示例中的dsn, username, password为您实际的数据库凭据。使用PDO的fetchAll(PDO::FETCH_ASSOC)确保数据以关联数组的形式返回，这更适合JSON转换。数据查询: 示例中查询了所有符合条件的用户。在真实的服务器端分页中，您需要解析Bootstrap Table通过GET或POST请求发送的参数，例如limit（每页记录数）、offset（偏移量）、sort（排序字段）、order（排序顺序）、search（搜索关键词）等，然后将这些参数整合到SQL查询的LIMIT, OFFSET, ORDER BY, WHERe子句中。JSON结构: Bootstrap Table在data-side-pagination="server"模式下，期望JSON响应包含至少两个顶级键：total: 符合条件的总记录数（用于计算总页数）。rows: 一个数组，包含当前页需要显示的数据行。totalNotFiltered: 如果有搜索功能，表示未应用搜索条件时的总记录数。echo json_encode($data);: 将PHP数组转换为JSON字符串并输出。3.2 访问PHP接口
假设您的Web服务器配置正确，并且users_data.php文件位于网站根目录下的api文件夹中，那么您可以通过类似http://yoursite.com/api/users_data.php的URL访问它。当您在浏览器中访问此URL时，应该会看到纯JSON格式的数据输出。
4. 配置Bootstrap Table前端
现在，我们已经有了后端JSON接口，接下来需要修改HTML和Javascript代码，让Bootstrap Table指向这个接口。
4.1 引入必要的资源
确保您的HTML文件中包含了Bootstrap Table及其导出扩展所需的CSS和JS文件。请注意，原始问题中的email protected链接需要替换为实际的CDN链接。
uBrand Logo生成器 uBrand Logo生成器是一款强大的AI智能LOGO设计工具。
124 查看详情 
<!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 Server-side Data</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css" rel="stylesheet"> <style> #toolbar { margin: 0; } </style></head><body> <div class="container"> <h2>用户列表</h2> <div id="toolbar" class="select"> <select class="form-control"> <option value="">导出基本数据</option> <option value="all">导出所有数据</option> <option value="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/api/users_data.php"> <!-- 重点：指向您的PHP接口URL --> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="id">ID</th> <th data-field="vorname">姓名</th> <th data-field="rolle">角色</th> </tr> </thead> </table> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/export/bootstrap-table-export.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.28.0/tableExport.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jspdf-autotable@3.8.1/dist/jspdf.plugin.autotable.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定义可以与HTML中的<thead><th>保持一致，也可以完全通过JS定义 // 如果使用HTML定义，可以省略此处的columns columns: [ { field: 'state', checkbox: true, visible: $(this).val() === 'selected' }, { field: 'id', title: 'ID' }, { field: 'vorname', // 确保与后端JSON中的键名匹配 title: '姓名' }, { field: 'rolle', // 确保与后端JSON中的键名匹配 title: '角色' } ] }); }).trigger('change'); }); </script></body></html>登录后复制关键改动：
data-url="http://yoursite.com/api/users_data.php": 将data-url属性的值更改为您的PHP接口的实际URL。data-field属性：在<thead>标签内的<th>中，data-field的值必须与后端JSON对象中对应的键名一致（例如，后端返回id, vorname, rolle，前端就用data-field="id", data-field="vorname", data-field="rolle"）。4.2 传递查询参数
如果您需要根据用户输入（如搜索框、过滤器）向后端传递参数，Bootstrap Table会自动将一些标准参数（如limit, offset, sort, order）作为GET请求参数发送到data-url。
如果您有自定义参数，例如根据价格范围过滤，可以在data-url中动态拼接：
<table id="table" ... data-url="http://yoursite.com/api/users_data.php<?= (isset($_GET['minprice']) ? '?minprice=' . $_GET['minprice'] : '') . (isset($_GET['maxprice']) ? '&maxprice=' . $_GET['maxprice'] : '') ?>"></table>登录后复制
注意： 上述PHP代码片段是在HTML中混合PHP，通常不推荐。更好的做法是在Javascript中动态构建data-url，或者使用Bootstrap Table的queryParams选项来传递额外参数。
使用 queryParams 选项 (推荐):
在Javascript中，您可以配置queryParams函数来传递自定义参数：
<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: [ // ... columns definition ... ], // 新增 queryParams 选项 queryParams: function(params) { // params 包含 Bootstrap Table 默认的 limit, offset, sort, order 等 // 您可以在这里添加自定义参数 params.minprice = $('#minPriceInput').val(); // 假设有一个输入框ID为 minPriceInput params.maxprice = $('#maxPriceInput').val(); // 假设有一个输入框ID为 maxPriceInput params.customFilter = 'some_value'; return params; } }); }).trigger('change'); });</script>登录后复制然后在PHP后端（users_data.php）中，您可以通过$_GET['minprice']、$_GET['maxprice']等来获取这些参数，并据此修改SQL查询。
5. 进一步优化与注意事项
服务器端分页、排序和搜索的实现: 在users_data.php中，您需要根据Bootstrap Table发送的limit、offset、sort、order、search等参数来动态构建SQL查询。limit: 每页记录数，用于SQL的LIMIT子句。offset: 偏移量，用于SQL的OFFSET子句。sort: 排序字段名，用于SQL的ORDER BY子句。order: 排序顺序（asc/desc），用于SQL的ORDER BY子句。search: 搜索关键词，用于SQL的WHERe ... LIKE %search%子句。错误处理: 在生产环境中，PHP接口应包含健壮的错误处理机制。当数据库查询失败或发生其他服务器错误时，应返回一个包含错误信息的JSON响应，而不是直接暴露PHP错误。安全性: 始终使用预处理语句（如PDO）来防止SQL注入攻击。对所有来自客户端的输入进行验证和清理。性能: 对于非常大的数据集，考虑数据库索引优化，并确保SQL查询高效。缓存: 对于不经常变动的数据，可以考虑在服务器端实现缓存机制，减少数据库负载。6. 总结
通过本教程，您应该已经掌握了如何将SQL数据库中的数据通过PHP后端接口转换为Bootstrap Table所需的JSON格式，并成功集成到前端表格中。关键在于理解data-url期望的是一个返回JSON的URL，以及Bootstrap Table对服务器端JSON响应的特定结构要求（total和rows）。遵循这些步骤，您将能够构建出高效且功能强大的动态数据表格。
以上就是将SQL数据作为JSON源集成到Bootstrap Table的教程的详细内容，更多请关注php中文网其它相关文章！
