我正在开发一个网络应用程序,用户可以在其中搜索数据并对结果进行分页。我实现了搜索功能,允许用户搜索特定数据和排序功能,以根据某些条件对结果进行排序。
但是,我面临两个主要问题:
搜索状态持久性:当用户导航到下一页结果时,搜索查询将被重置,并且他们会丢失搜索上下文。如何确保搜索查询在分页中持续存在,以便用户可以根据原始搜索继续浏览结果?
排序状态问题:此外,虽然排序在结果的第一页上运行良好,但当用户导航到后续页面时,排序似乎会重置,并且结果未按预期一致排序。如何维护所有结果页面的排序状态?
我已经彻底检查了我的代码,但我无法确定导致这些问题的确切问题。有人可以提供有关如何解决这些问题的见解或建议,并确保跨分页结果的搜索和排序功能提供无缝的用户体验吗?
adminUserList.php
session_start();
if (!isset($_SESSION['sort_order'])) {
$_SESSION['sort_order'] = ''; // Set default sort order if not set
}
// Store sorting order in session
if (isset($_POST['sort_order'])) {
$_SESSION['sort_order'] = $_POST['sort_order'];
var_dump($_SESSION);
}
$limit = 5;
$searchValue = isset($_POST['search']) ? $_POST['search'] : '';
$sortOrder = isset($_POST['sort_order']) ? $_POST['sort_order'] : '';
$page = isset($_POST["page_no"]) ? $_POST["page_no"] : 1;
$sno = ($page - 1) * $limit + 1;
if ($searchValue !== "") {
$result = $database->searchUser($searchValue, (int)$limit);
$total_record = $database->getTotalRecords(['f_name'], $searchValue);
$total_page = ceil($total_record / $limit);
echo $twig->render('adminUserList.twig', ['result' => $result, 'total_page' => $total_page, 'current_page' => $page, 'sno' => $sno, 'searchValue' => $searchValue, 'email' => $email, 'sortOrder' => $_SESSION['sort_order']]);
} elseif ($_SESSION['sort_order']) {
$result = $database->getUsersSorted($_SESSION['sort_order'], $limit); // Corrected
$total_record = $database->getTotalRecords();
$total_page = ceil($total_record / $limit);
echo $twig->render('adminUserList.twig', ['result' => $result, 'total_page' => $total_page, 'current_page' => $page, 'sno' => $sno, 'email' => $email, 'sortOrder' => $_SESSION['sort_order']]);
} else {
// Handle case when neither search nor sorting is applied
$result = $database->selectAllUser($limit, $page);
$total_record = $database->getTotalRecords();
$total_page = ceil($total_record / $limit);
handel ajax 的 admin.js 文件
// Function to load table data
function loadTable(page = 1, fn) {
$.ajax({
url: "adminUserList.php",
type: "POST",
data: {
page_no: page,
},
success: function (data) {
$("#table-data").html(data);
fn?.();
}
});
}
// Search code
function loadSearch(page = 1,oder) {
var search_term = $("#searchInput").val();
$.ajax({
url: "adminUserList.php",
type: "POST",
data: {
search: search_term,
page_no: page,
sortOrder:oder,
},
success: function (data) {
$("#table-data").html(data);
}
});
}
// Trigger search on keyup
$(document).on("keyup", "#searchInput", function () {
loadSearch();
});
// Code for pagination search
$(document).on("click", ".page-item a", function (e) {
e.preventDefault();
var page_id = $(this).attr("id");
console.log(page_id)
loadSearch(page_id);
});
// Sorting code
$(document).on("change", "#sort-order", function () {
var sortOrder = $(this).val();
sortTable(sortOrder);
});
// Function to sort table
function sortTable(order) {
console.log(order);
var page_id = $(".pagination .active").find("a").attr("id");
console.log(page_id);
$.ajax({
url: "adminUserList.php",
type: "POST",
data: {
page_no: page_id,
sort_order: order
},
success: function (data) {
$("#table-data").html(data);
}
});
}
树枝文件
<select id="sort-order" class="btn btn-secondary">
<option value="ASC">Ascending</option>
<option value="DESC">Descending</option>
</select>
</th>
<th scope='col'>Email-Id</th>
<th scope='col'>Phone-No</th>
{% if result is not empty %}
{% for row in result %}
<tr>
<td>{{ sno }}</td>
<td>{{ row['f_name'] }} {{ row['l_name'] }}</td>
<td>{{ row['email'] }}</td>
<
<button type='button' class='btn btn-info' data-eid='{{ row['uid'] }}'>view</button>
<button type='button' class='btn btn-danger' data-id='{{ row['uid'] }}'>Delete</button>
</td>
</tr>
{% set sno = sno + 1 %}
{% endfor %}
{% else %}
<tr>
<td colspan="8">
<h2>No Records Found</h2>
</td>
</tr>
{% endif %}
</tr>
</table>
<!-- Pagination controls -->
<nav aria-label="Page navigation">
<ul class="pagination">
{% if total_page > 0 %}
{% for page_num in 1..total_page %}
{% if searchValue != "" %}
<li class='Search-item {% if page_num == current_page %}active{% endif %}'>
<a class="page-link" href="?page={{ page_num }}&search={{ searchValue }}" id="{{ page_num }}">
{{ page_num }}
</a>
</li>
{% else %}
<li class='page-item {% if page_num == current_page %}active{% endif %}'>
<a class="page-link" href="?page={{ page_num }}" id="{{ page_num }}">
{{ page_num }}
</a>
</li>
{% endif %}
{% endfor %}
{% else %}
<li class="page-item disabled">
<span class="page-link">
No Records Found
</span>
</li>
{% endif %}
</ul>
</nav>
出现没有“搜索状态持久性”的问题是因为 adminUserList.php 显然是最初发布的,因此您使用 $_POST 来获取参数,但是您生成的分页只是锚标记,您需要使用 $_GET获取您没有的参数。
至少有两种方法可以纠正该问题:
(1) 两者中更简单的一个是修改最初发布到 adminUserList 的页面并使其传递 url 本身的参数。然后在 adminUserList.php 中将每个 $_POST 更改为 $_GET。
(2) 第二种方法是修改 adminUserList.php,使其可以处理 post 和 get 类型参数。