在 Web 应用程序中维护分页结果的搜索和排序状态

问题描述 投票:0回答:1

我正在开发一个网络应用程序,用户可以在其中搜索数据并对结果进行分页。我实现了搜索功能,允许用户搜索特定数据和排序功能,以根据某些条件对结果进行排序。

但是,我面临两个主要问题:

搜索状态持久性:当用户导航到下一页结果时,搜索查询将被重置,并且他们会丢失搜索上下文。如何确保搜索查询在分页中持续存在,以便用户可以根据原始搜索继续浏览结果?

排序状态问题:此外,虽然排序在结果的第一页上运行良好,但当用户导航到后续页面时,排序似乎会重置,并且结果未按预期一致排序。如何维护所有结果页面的排序状态?

我已经彻底检查了我的代码,但我无法确定导致这些问题的确切问题。有人可以提供有关如何解决这些问题的见解或建议,并确保跨分页结果的搜索和排序功能提供无缝的用户体验吗?

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>

javascript php jquery ajax
1个回答
0
投票

出现没有“搜索状态持久性”的问题是因为 adminUserList.php 显然是最初发布的,因此您使用 $_POST 来获取参数,但是您生成的分页只是锚标记,您需要使用 $_GET获取您没有的参数。

至少有两种方法可以纠正该问题:

(1) 两者中更简单的一个是修改最初发布到 adminUserList 的页面并使其传递 url 本身的参数。然后在 adminUserList.php 中将每个 $_POST 更改为 $_GET。

(2) 第二种方法是修改 adminUserList.php,使其可以处理 post 和 get 类型参数。

© www.soinside.com 2019 - 2024. All rights reserved.