引言：前端搜索的局限性
在构建基于数据库的网页应用时，分页显示大量数据是一种常见的做法，它可以有效提高页面加载速度和用户体验。然而，当用户尝试在这些分页数据中进行搜索时，如果搜索逻辑完全依赖于前端javascript，就会遇到一个显著的问题：前端javascript只能访问当前页面上已加载的数据。这意味着，无论用户输入什么搜索词，它都无法从其他未加载的页面中找到匹配的结果。
原始问题中描述的myFunction()函数就是一个典型的客户端JavaScript搜索实现。它通过遍历HTML表格（table.getElementsByTagName("tr")）的行来隐藏不匹配的项。这种方法对于少量数据或无需分页的表格非常有效，但对于分页场景，它无法触及数据库中所有的数据。为了实现对所有数据的全面搜索，我们必须将搜索逻辑转移到服务器端。
核心概念：服务器端搜索
服务器端搜索的核心思想是：将用户的搜索请求发送到服务器，由服务器在数据库层面执行搜索操作。数据库会根据搜索条件过滤所有数据，然后服务器再根据过滤后的结果重新计算总记录数和总页数，并返回当前页的匹配数据。这样，无论数据分布在多少页中，搜索都能覆盖到所有记录。
实现服务器端搜索的关键步骤包括：
- 传递搜索参数：通过URL参数（GET请求）将搜索关键词从前端发送到后端。
- 后端SQL查询改造：在PHP中获取搜索关键词，并将其整合到数据库查询语句（SELECT和COUNT）的WHERE子句中。
- 分页逻辑调整：根据搜索结果的总数重新计算分页信息。
- 前端分页链接联动：确保所有分页链接在携带页码的同时，也携带当前的搜索关键词，以便在切换页面时保持搜索状态。
实现步骤
1. 准备工作：修改URL参数
首先，我们需要定义一个URL参数来传递搜索关键词。通常，我们可以在现有的分页参数page之外，再添加一个参数，例如s。 例如，当用户搜索“example”时，URL可能变为：http://localhost:8080/table?page=1&s=example。
2. 后端PHP逻辑：整合搜索条件
在PHP脚本的顶部，处理分页逻辑之前，我们需要检查是否存在搜索参数，并据此构建SQL查询的WHERE子句。
立即学习“PHP免费学习笔记（深入）”；
<?php
// 假设 $conn 是你的数据库连接对象
// 现有分页逻辑
if (isset($_GET['page']) && $_GET['page'] != "") {
$page = $_GET['page'];
} else {
$page = 1;
}
$total_records_per_page = 10; // 每页显示记录数
$offset = ($page - 1) * $total_records_per_page;
$previous_page = $page - 1;
$next_page = $page + 1;
$adjacents = "2"; // 临近页码显示数量
// --- 新增：搜索逻辑 ---
$search_query_param = ""; // 用于构建URL的分页链接参数
$search_term = ""; // 实际搜索关键词
if (isset($_GET['s']) && $_GET['s'] != "") {
// 对搜索关键词进行安全处理，防止SQL注入
// **注意：mysqli_real_escape_string 仅是基本防护，更推荐使用预处理语句**
$search_term = mysqli_real_escape_string($conn, $_GET['s']);
// 构建URL参数，使用 urlencode 确保特殊字符正确编码
$search_query_param = "&s=" . urlencode($search_term);
}
$where_clause = "";
if (!empty($search_term)) {
// 构建 WHERE 子句。你需要根据你的表结构调整搜索的列名。
// 假设你希望在 'name' 和 'description' 列中进行模糊搜索
$where_clause = " WHERE `name` LIKE '%" . $search_term . "%' OR `description` LIKE '%" . $search_term . "%'";
// 你也可以根据需要添加更多列，或只搜索特定列
// $where_clause = " WHERE `some_column` LIKE '%" . $search_term . "%'";
}
// --- 修改：总记录数查询 ---
// 将 WHERE 子句添加到 COUNT(*) 查询中
$result_count = mysqli_query(
$conn,
"SELECT COUNT(*) As total_records FROM `snapchat`" . $where_clause
);
if (!$result_count) {
die("Error fetching total records: " . mysqli_error($conn));
}
$total_records = mysqli_fetch_array($result_count);
$total_records = $total_records['total_records'];
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1;
// --- 修改：实际数据查询（这部分代码在原始问题中未提供，但非常关键）---
// 确保你的数据查询也包含了 WHERE 子句和 LIMIT 子句
$sql_data = "SELECT * FROM `snapchat`" . $where_clause . " LIMIT " . $offset . ", " . $total_records_per_page;
$result_data = mysqli_query($conn, $sql_data);
if (!$result_data) {
die("Error fetching data: " . mysqli_error($conn));
}
// 之后你就可以循环 $result_data 来显示表格内容了
?>3. 前端HTML/JavaScript：触发服务器端搜索
原有的onkeyup JavaScript函数不再适用于服务器端搜索，因为它只在客户端操作DOM。现在，我们需要一个表单来提交搜索关键词到服务器。当用户输入搜索词并提交时，页面会重新加载，并携带搜索参数。
<!-- 在你的表格上方或其他合适位置添加搜索表单 -->
<form method="GET" action="">
<!-- 隐藏域，确保在提交搜索时保留当前的页码，或将其重置为第一页 -->
<!-- 如果希望搜索后总是回到第一页，则设置为 value="1" -->
<input type="hidden" name="page" value="1">
<input type="text" id="myInput" name="s"
placeholder="搜索内容..."
value="<?php echo htmlspecialchars($search_term); ?>">
<button type="submit">搜索</button>
</form>
<!-- 原始的 JavaScript myFunction 不再用于搜索，可以移除或修改为其他用途 -->
<!-- <script>
function myFunction() {
// 此函数现在不再用于全局搜索，因为它只作用于当前页面DOM
// 如果需要客户端筛选当前页已加载数据，可以保留并调整
// 但对于跨页搜索，此函数不再适用
}
</script> -->注意：value="<?php echo htmlspecialchars($search_term); ?>"这行代码非常重要，它确保了用户提交的搜索词在页面重新加载后仍然显示在搜索输入框中，提升了用户体验。htmlspecialchars用于防止XSS攻击。
4. 分页导航与搜索状态的联动
当用户进行了搜索后，所有的分页链接（“上一页”、“下一页”以及所有页码）都必须包含当前的搜索关键词。这样，用户在搜索结果中翻页时，搜索条件才不会丢失。
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<?php // if($page > 1){ echo "<li><a href='?page=1'>First Page</a></li>"; } ?>
<li <?php if($page <= 1){ echo "class='page-item page-link disabled' style='color:black;'"; } ?>>
<!-- 在 href 中添加 $search_query_param -->
<a <?php if($page > 1){ echo "class='page-link' href='?page=$previous_page" . $search_query_param . "'"; } ?>>Poprzednia</a>
</li>
<?php
if ($total_no_of_pages <= 10){
for ($counter = 1; $counter <= $total_no_of_pages; $counter++){
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>";
}else{
// 在 href 中添加 $search_query_param
echo "<li class='page-item'><a class='page-link' href='?page=$counter" . $search_query_param . "'>$counter</a></li>";
}
}
}
elseif($total_no_of_pages > 10){
if($page <= 4) {
for ($counter = 1; $counter < 8; $counter++){
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>";
}else{
// 在 href 中添加 $search_query_param
echo "<li class='page-item'><a class='page-link' href='?page=$counter" . $search_query_param . "'>$counter</a></li>";
}
}
echo "<li class='page-item'><a class='page-link'>...</a></li>";
// 在 href 中添加 $search_query_param
echo "<li class='page-item'><a class='page-link' href='?page=$second_last" . $search_query_param . "'>$second_last</a></li>";
// 在 href 中添加 $search_query_param
echo "<li class='page-item'><a class='page-link' href='?page=$total_no_of_pages" . $search_query_param . "'>$total_no_of_pages</a></li>";
}
elseif($page > 4 && $page < $total_no_of_pages - 4) {
// 在 href 中添加 $search_query_param
echo "<li class='page-item'><a class='page-link' href='?page=1" . $search_query_param . "'>1</a></li>";
// 在 href 中添加 $search_query_param
echo "<li class='page-item'><a class='page-link' href='?page=2" . $search_query_param . "'>2</a></li>";
echo "<li class='page-item'><a class='page-link'>...</a></li>";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++) {
if ($counter == $page) {
echo "<li class='page-item active'><a class='page-link'>$counter</a></li>"; 
