本教程详细介绍了如何将SQL数据库中的数据通过PHP后端接口转换为Bootstrap Table所需的JSON格式，并实现服务器端分页、排序和搜索功能。通过创建独立的PHP文件作为数据API，配置HTTP响应头，执行PDO查询，并根据Bootstrap Table的特定数据结构（total、rows）格式化输出，最终实现动态、高效的数据展示。
Bootstrap Table是一个功能丰富的表格插件，它支持从远程URL加载数据。当配置data-url属性时，Bootstrap Table会向该URL发起AJAX请求，并期望返回特定格式的JSON数据。对于服务器端分页（data-side-pagination="server"），它通常期望以下结构：
{
"total": 100, // 总记录数
"totalNotFiltered": 100, // 未过滤的总记录数 (在没有搜索条件时与total相同)
"rows": [ // 当前页的数据行
{ "id": 1, "name": "Item A", "price": "$10" },
{ "id": 2, "name": "Item B", "price": "$20" }
]
}用户遇到的问题是，直接在HTML的data-url属性中使用zuojiankuohaophpcn?=json_encode($users)?>无法正确显示数据。这是因为data-url期望的是一个可以被浏览器独立访问并返回JSON字符串的HTTP端点，而不是直接嵌入在HTML页面中的PHP变量。服务器端需要一个独立的脚本来查询数据库，并将结果以JSON格式输出。
要解决这个问题，我们需要创建一个独立的PHP文件，它将作为Bootstrap Table的数据接口。
假设我们创建一个名为users_data.php的文件。
在PHP脚本的开头，必须设置Content-Type头，告知客户端返回的内容是JSON格式。这必须在任何输出（包括空格或HTML）之前完成。
<?php
header('Content-type: application/json; charset=utf-8');
// ... 其他代码
?>使用PDO（PHP Data Objects）连接到SQL数据库并执行查询是推荐的做法，因为它提供了更好的安全性和灵活性。
<?php
// ... (之前的header设置)
// 数据库连接配置 (请根据实际情况修改)
$host = 'localhost';
$db = 'your_database';
$user = 'your_username';
$pass = 'your_password';
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
// 生产环境中应记录错误而非直接输出
http_response_code(500);
echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]);
exit();
}
// 示例查询，获取所有用户
$statement = $pdo->prepare("SELECT id, vorname AS name, rolle AS role FROM users WHERE cid = :cid");
// 假设 $user['cid'] 是从会话或其他安全方式获取的用户ID
// 这里为了示例方便，假设cid为1
$cid = 1; // 替换为实际的用户或租户ID
$statement->execute([':cid' => $cid]);
$users = $statement->fetchAll(); // 获取所有匹配的行
// ...
?>注意： 这里的vorname AS name, rolle AS role是为了让数据库字段名与Bootstrap Table期望的name和role字段名保持一致，这有助于前端的列定义。
Bootstrap Table期望的数据结构包含total和rows。我们需要将查询结果封装到这个结构中。
<?php
// ... (之前的数据库连接和查询代码)
$data = [
'total' => count($users), // 当前查询结果的总数
'totalNotFiltered' => count($users), // 在没有过滤的情况下，与total相同
'rows' => $users, // 查询到的数据行
];
echo json_encode($data);
?><?php
header('Content-type: application/json; charset=utf-8');
// 数据库连接配置
$host = 'localhost';
$db = 'your_database';
$user = 'your_username';
$pass = 'your_password';
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
http_response_code(500);
echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]);
exit();
}
// 假设 $user['cid'] 是从会话或其他安全方式获取的用户ID
$cid = 1; // 替换为实际的用户或租户ID
$statement = $pdo->prepare("SELECT id, vorname AS name, rolle AS role FROM users WHERE cid = :cid");
$statement->execute([':cid' => $cid]);
$users = $statement->fetchAll();
$data = [
'total' => count($users),
'totalNotFiltered' => count($users),
'rows' => $users,
];
echo json_encode($data);
?>对于大型数据集，仅返回所有数据是不高效的。Bootstrap Table支持服务器端分页、排序和搜索。当data-side-pagination="server"启用时，Bootstrap Table会在请求中发送以下GET参数：
我们的PHP脚本需要接收并处理这些参数。
<?php
header('Content-type: application/json; charset=utf-8');
// 数据库连接配置 (同上)
$host = 'localhost';
$db = 'your_database';
$user = 'your_username';
$pass = 'your_password';
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
http_response_code(500);
echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]);
exit();
}
// 获取Bootstrap Table发送的参数
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
$offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;
$sort = isset($_GET['sort']) ? $_GET['sort'] : 'id'; // 默认排序字段
$order = isset($_GET['order']) ? $_GET['order'] : 'asc'; // 默认排序顺序
$search = isset($_GET['search']) ? $_GET['search'] : ''; // 全局搜索关键字
// 验证和清理排序字段，防止SQL注入
$allowedSortFields = ['id', 'name', 'role']; // 允许排序的字段
if (!in_array($sort, $allowedSortFields)) {
$sort = 'id'; // 默认值
}
$order = (strtolower($order) === 'desc') ? 'DESC' : 'ASC';
// 假设 $user['cid'] 是从会话或其他安全方式获取的用户ID
$cid = 1; // 替换为实际的用户或租户ID
// 构建SQL查询
$sql = "SELECT id, vorname AS name, rolle AS role FROM users WHERE cid = :cid";
$params = [':cid' => $cid];
// 处理搜索条件
if (!empty($search)) {
$sql .= " AND (vorname LIKE :search_name OR rolle LIKE :search_role)";
$params[':search_name'] = '%' . $search . '%';
$params[':search_role'] = '%' . $search . '%';
}
// 获取总记录数 (不带分页)
$countSql = "SELECT COUNT(*) FROM users WHERE cid = :cid";
$countParams = [':cid' => $cid];
if (!empty($search)) {
$countSql .= " AND (vorname LIKE :search_name OR rolle LIKE :search_role)";
$countParams[':search_name'] = '%' . $search . '%';
countParams[':search_role'] = '%' . $search . '%';
}
$stmtCount = $pdo->prepare($countSql);
$stmtCount->execute($countParams);
$totalRows = $stmtCount->fetchColumn();
// 添加排序和分页
$sql .= " ORDER BY $sort $order LIMIT :limit OFFSET :offset";
$params[':limit'] = $limit;
$params[':offset'] = $offset;
$statement = $pdo->prepare($sql);
$statement->execute($params);
$rows = $statement->fetchAll();
$data = [
'total' => $totalRows, // 实际的总记录数
'totalNotFiltered' => $totalRows, // 如果没有高级过滤，可以与total相同
'rows' => $rows,
];
echo json_encode($data);
?>现在，我们将data-url指向新创建的PHP接口文件，并确保启用服务器端分页。
<!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://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-search="true" <!-- 启用搜索框 -->
data-url="users_data.php"> <!-- 指向你的PHP接口 -->
<thead>
<tr>
<th data-field="state" data-checkbox="true"></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/bootstrap-table@1.22.6/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.2/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: [
{
field: 'state',
checkbox: true,
visible: $(this).val() === 'selected'
},
{
field: 'id',
title: 'ID',
sortable: true // 允许排序
}, {
field: 'name',
title: '姓名',
sortable: true // 允许排序
}, {
field: 'role',
title: '角色',
sortable: true // 允许排序
}
]
})
}).trigger('change')
})
</script>
</body>
</html>注意：
通过以上步骤，我们成功地构建了一个PHP后端接口，它能够从SQL数据库中获取数据，将其格式化为Bootstrap Table所需的JSON结构，并支持服务器端的分页、排序和搜索功能。前端Bootstrap Table通过data-url属性连接到这个接口，从而实现了动态、高效且用户友好的数据展示。这种分离前后端逻辑的方法是构建现代Web应用程序的常见模式，它提高了代码的可维护性和可扩展性。
以上就是将SQL数据转换为JSON并集成到Bootstrap Table的教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
817
收藏
