
在web应用开发中,当需要展示大量数据时,分页是一种常见的优化手段。然而,如果在此基础上实现搜索功能,尤其是在数据量庞大时,仅依赖前端javascript进行搜索会导致功能受限——它只能对当前页面已加载的数据进行过滤,而无法触及其他页面上的数据。本文将深入探讨这一问题,并提供一套基于php和mysql的服务端搜索解决方案,确保搜索功能的全面性和高效性。
原始的客户端搜索逻辑(如通过onkeyup事件触发JavaScript函数)的工作原理是遍历HTML表格中的行,根据用户输入过滤显示或隐藏这些行。这种方法对于少量静态数据或无分页的表格是有效的。然而,一旦引入分页,每次页面加载只从数据库获取一部分数据并渲染到DOM中。客户端JavaScript无法访问数据库中未加载的数据,因此其搜索范围自然被限制在当前分页所显示的数据集内。
要实现对所有数据的全面搜索,必须将搜索逻辑推送到数据源端,即后端服务器和数据库。
服务端搜索的核心思想是:用户在前端输入搜索关键词后,该关键词会作为参数发送到后端服务器。后端服务器接收到关键词后,将其整合到数据库查询语句中,对原始数据进行过滤。然后,再对过滤后的结果集进行分页处理,并将当前页的数据返回给前端展示。这样,无论是数据总数、总页数还是当前页的数据,都将是基于搜索条件过滤后的结果。
首先,我们需要修改PHP代码,使其能够接收前端传递的搜索关键词。通常,搜索关键词会通过URL参数(GET请求)传递,例如 ?page=1&search=keyword。
立即学习“PHP免费学习笔记(深入)”;
在页面顶部的PHP代码中,添加对$_GET['search']参数的检查:
<?php
// 数据库连接 $conn 假设已存在
if (isset($_GET['page']) && $_GET['page'] != "") {
$page = $_GET['page'];
} else {
$page = 1;
}
$search_query = "";
if (isset($_GET['search']) && $_GET['search'] != "") {
// 对搜索关键词进行安全处理,防止SQL注入
// 推荐使用预处理语句,此处为简化示例,实际生产环境务必使用 mysqli_prepare 或 PDO
$search_keyword = mysqli_real_escape_string($conn, $_GET['search']);
$search_query = " WHERE `column_name` LIKE '%" . $search_keyword . "%'"; // 替换为你的搜索列名
// 如果需要搜索多个列,可以使用 OR 连接
// $search_query = " WHERE `column1` LIKE '%" . $search_keyword . "%' OR `column2` LIKE '%" . $search_keyword . "%'";
}
$total_records_per_page = 10;
$offset = ($page - 1) * $total_records_per_page;
$previous_page = $page - 1;
$next_page = $page + 1;
$adjacents = "2";
// 统计总记录数时,也需要应用搜索条件
$result_count = mysqli_query(
$conn,
"SELECT COUNT(*) As total_records FROM `snapchat`" . $search_query
);
$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;
// 获取当前页数据时,同样应用搜索条件和分页限制
$sql = "SELECT * FROM `snapchat`" . $search_query . " LIMIT " . $offset . ", " . $total_records_per_page;
$result = mysqli_query($conn, $sql);
// ... 之后是数据渲染到表格的代码
?>关键修改点:
直接将用户输入拼接到SQL查询字符串中存在SQL注入的风险。虽然mysqli_real_escape_string提供了一定保护,但预处理语句是更推荐和安全的做法。
使用预处理语句的示例:
<?php
// ... (之前的分页参数定义)
$search_keyword = "";
$search_param = ""; // 用于预处理绑定的参数
if (isset($_GET['search']) && $_GET['search'] != "") {
$search_keyword = $_GET['search'];
$search_param = "%" . $search_keyword . "%"; // 绑定参数时需要包含通配符
}
// 统计总记录数
$count_sql = "SELECT COUNT(*) As total_records FROM `snapchat`";
if (!empty($search_keyword)) {
$count_sql .= " WHERE `column_name` LIKE ?";
}
$stmt_count = mysqli_prepare($conn, $count_sql);
if (!empty($search_keyword)) {
mysqli_stmt_bind_param($stmt_count, "s", $search_param);
}
mysqli_stmt_execute($stmt_count);
$result_count = mysqli_stmt_get_result($stmt_count);
$total_records = mysqli_fetch_array($result_count)['total_records'];
mysqli_stmt_close($stmt_count);
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1;
// 获取当前页数据
$data_sql = "SELECT * FROM `snapchat`";
if (!empty($search_keyword)) {
$data_sql .= " WHERE `column_name` LIKE ?";
}
$data_sql .= " LIMIT ?, ?";
$stmt_data = mysqli_prepare($conn, $data_sql);
if (!empty($search_keyword)) {
mysqli_stmt_bind_param($stmt_data, "sii", $search_param, $offset, $total_records_per_page);
} else {
mysqli_stmt_bind_param($stmt_data, "ii", $offset, $total_records_per_page);
}
mysqli_stmt_execute($stmt_data);
$result = mysqli_stmt_get_result($stmt_data);
mysqli_stmt_close($stmt_data);
// ... 之后是数据渲染到表格的代码
?>不再使用onkeyup直接操作DOM,而是让搜索输入框触发一次页面跳转或表单提交,将搜索关键词发送到后端。
<!-- 假设这是你的搜索输入框 -->
<input type="text" id="myInput" placeholder="搜索..." value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
<button onclick="performSearch()">搜索</button>
<script>
function performSearch() {
var input = document.getElementById("myInput");
var searchTerm = input.value;
var currentUrl = new URL(window.location.href);
// 移除旧的 'search' 参数,避免重复
currentUrl.searchParams.delete('search');
// 移除旧的 'page' 参数,搜索时通常从第一页开始
currentUrl.searchParams.delete('page');
if (searchTerm) {
currentUrl.searchParams.append('search', searchTerm);
}
window.location.href = currentUrl.toString();
}
// 也可以监听 Enter 键
document.getElementById("myInput").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
performSearch();
}
});
</script>修改点:
所有分页链接也必须携带当前的搜索关键词,以确保用户在搜索结果中翻页时,搜索条件依然有效。
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<?php
// 获取当前搜索关键词,用于拼接分页链接
$current_search_param = isset($_GET['search']) ? '&search=' . urlencode($_GET['search']) : '';
?>
<li <?php if($page <= 1){ echo "class='page-item page-link disabled' style='color:black;'"; } ?>>
<a <?php if($page > 1){ echo "class='page-link' href='?page=$previous_page" . $current_search_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{
echo "<li class='page-item'><a class='page-link' href='?page=$counter" . $current_search_param . "'>$counter</a></li>";
}
}
}
elseif($total_no_of_pages > 10){
// ... (省略了中间页码逻辑,但原理相同:所有链接都要加上 $current_search_param)
// 示例:
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{
echo "<li class='page-item'><a class='page-link' href='?page=$counter" . $current_search_param . "'>$counter</a></li>";
}
}
echo "<li class='page-item'><a class='page-link'>...</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=$second_last" . $current_search_param . "'>$second_last</a></li>";
echo "<li class='page-item'><a class='page-link' href='?page=$total_no_of_pages" . $current_search_param . "'>$total_no_of_pages</a></li>";
}
// ... 其他分页逻辑也需如此处理
}
?>
<li <?php if($page >= $total_no_of_pages){ echo "class='page-item page-link disabled' style='color:black;'"; } ?>>
<a <?php if($page < $total_no_of_pages) { echo "class='page-link' href='?page=$next_page" . $current_search_param . "'"; } ?>>Następna</a>
</li>
<?php if($page < $total_no_of_pages){
echo "<li class='page-item'><a class='page-link' href='?page=$total_no_of_pages" . $current_search_param . "'>Ostatnia ››</a></li>";
} ?>
</ul>
</nav>修改点:
通过将搜索逻辑从前端迁移到后端,并确保搜索条件在分页和搜索请求中持续传递,我们成功地实现了一个能够对全量数据进行搜索并分页显示的系统。
关键注意事项:
通过以上步骤,你将能够构建一个健壮且高效的服务端搜索与分页系统,为用户提供更好的数据交互体验。
以上就是PHP与MySQL分页数据实现高效服务端搜索教程的详细内容,更多请关注php中文网其它相关文章!
PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号