将SQL数据作为JSON源集成到Bootstrap Table的教程-php教程-PHP中文网

将SQL数据作为JSON源集成到Bootstrap Table的教程

本教程详细介绍了如何将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响应头为JSON
header('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中文网其它相关文章！