PHP服务端分页表格JS搜索仅当前页生效，如何实现全量数据检索？

问题根因 #

你当前的搜索逻辑是纯前端实现，只能操作当前页面已经加载的DOM元素。而PHP分页逻辑是每次请求仅从数据库拉取当前页的10条数据，其他分页的数据根本没有渲染到当前页面中，自然无法检索到其他页的匹配结果。

推荐方案：服务端实现搜索+分页联动（适配所有数据量场景） #

步骤1：调整前端搜索逻辑 #

将搜索关键词提交给后端处理，而非仅操作本地DOM，最简单的实现是用表单包裹搜索框，提交时自动将搜索参数带入URL：

<form action="" method="get">
  <input type="text" id="myInput" name="search" placeholder="输入搜索内容" onkeyup="this.form.submit()">
</form>

如果不需要页面刷新，可把JS逻辑改为监听输入事件，将page和search参数通过AJAX传给后端，再局部替换表格和分页区域的内容即可，用户体验更好。

步骤2：修改PHP分页的查询与统计逻辑 #

接收前端传的搜索参数，拼接进SQL的WHERE条件，统计总数和拉取当前页数据时都要携带搜索条件：

// 接收搜索参数，过滤首尾空格
$search = isset($_GET['search']) ? trim($_GET['search']) : '';

// 原有页码逻辑保持不变
$page = isset($_GET['page']) && $_GET['page'] != "" ? (int)$_GET['page'] : 1;
$total_records_per_page = 10;
$offset = ($page - 1) * $total_records_per_page;
$previous_page = $page - 1;
$next_page = $page + 1;
$adjacents = 2;

// 修改统计总条数的SQL，有搜索关键词时追加WHERE条件
$countSql = "SELECT COUNT(*) As total_records FROM `snapchat`";
if (!empty($search)) {
    // 此处用mysqli_real_escape_string转义防止SQL注入，生产环境更推荐用mysqli_prepare做参数绑定
    $safeSearch = mysqli_real_escape_string($conn, $search);
    // 需要搜索多个字段就追加OR 字段名 LIKE '%xxx%'即可
    $countSql .= " WHERE 要搜索的字段名 LIKE '%{$safeSearch}%'";
}
$result_count = mysqli_query($conn, $countSql);
$total_records = mysqli_fetch_array($result_count)['total_records'];
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1;

// 拉取当前页数据的SQL也要添加相同的搜索条件，最后加LIMIT分页
$dataSql = "SELECT * FROM `snapchat`";
if (!empty($search)) {
    $safeSearch = mysqli_real_escape_string($conn, $search);
    $dataSql .= " WHERE 要搜索的字段名 LIKE '%{$safeSearch}%'";
}
$dataSql .= " LIMIT $offset, $total_records_per_page";
$listResult = mysqli_query($conn, $dataSql);
// 后续循环输出$listResult的内容到表格即可

注意：直接拼接用户输入到SQL语句有SQL注入风险，生产环境必须用参数绑定的方式处理查询条件，不要直接拼接字符串。

步骤3：修改分页链接，保留搜索参数 #

所有分页跳转链接都要携带当前的搜索参数，避免点击分页时搜索条件丢失，比如原有的上一页链接修改为：

<a <?php if($page > 1){ echo "class='page-link' href='?page=$previous_page&search=".urlencode($search)."'"; } ?>>Poprzednia</a>

其他页码、下一页、首页、尾页的所有分页链接都要按照相同规则拼接&search=xxx参数。

备选方案（仅适合总数据量小于1000条的小数据场景） #

如果你的snapchat表总数据量很小，可以一次性把全量数据从后端拉到前端存在JS变量中，搜索和分页都纯前端实现，不需要每次请求后端。该方案数据量大时会导致页面加载缓慢、卡顿，仅适合小数据量场景使用。

内容的提问来源于stack exchange，提问作者Zimnytu