javascript - 如何使用 Ajax 添加更多过滤器和寻呼机

Question

我有以下 ajax 结构，允许我显示 10、25、50 和 100 条记录

$(function() {
    $(document).on('click', '.pagination li a', function(evt) {
        evt.preventDefault();
        url = $(this).attr('data-target');
        ajaxLoad(url);
    });

    $('#amount_show').change(function(evt) {
        evt.preventDefault();
        ajaxLoad('pagination.php');
    });

    ajaxLoad('pagination.php');

    function ajaxLoad(url) {
        query_params = {
            amount_show: $('#amount_show').val()
        };
        
        $('.data-pagination').html('<div class="loading">Loading...</div>');
        $.ajax({
            type: "GET",
            url: url,
            data: $.param(query_params),
            success: function(data) {
                $('.data-pagination').fadeOut('1000', function() { $(this).html(data) }).fadeIn('1000');
            }
        });
    }
});

根据我从以下 HTML 结构中选择的 ajax，它给我带来了正确发送的结果。

<select id="amount_show" name="amount_show">
    <option value="10" selected>10</option>
    <option value="25" >25</option>
    <option value="50" >50</option>
    <option value="100">100</option>
</select>

但我仍然不明白如何向寻呼机添加更多过滤器，例如客户端类型、用户类型或搜索引擎。
或者按日期搜索过滤器，我想在我的分页中添加这么多过滤器，但为此我需要一点插入如何继续。
这是我的 PHP 代码，您能向我解释如何向寻呼机添加更多过滤器吗？

<?php
    $strs = '';
    $pagination_page = 'pagination.php';
    $defaul_records = 10;

    if (isset($_GET['page'])) {
        $page = $_GET['page'] ? : '';
    } else {
        $page = 1;
    }

    if (isset($_GET['amount_show'])) {
        $records_by_page = $_GET['amount_show'];
    } else {
        $records_by_page = $defaul_records;
    }

    $localization_sql = ($page - 1) * $records_by_page;

    $stmtPD = $con->prepare("SELECT idCliente,
                                    nomCliente
                            FROM cliente
                            ORDER BY idCliente DESC LIMIT $localization_sql, $records_by_page");
    $stmtPD->execute();
    $stmtPD->store_result();

    if ($stmtPD->num_rows > 0):

        ob_start();

        $strs .= '<table id="data-table" class="table bootgrid-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>CLIENTE</th>
                            <th>ACCIÓN</th>
                        </tr>
                    </thead>
                    <tbody>';

        $stmtPD->bind_result(
            $idCliente,
            $nomCliente
        );
        while ($stmtPD->fetch()) {
            $strs .= '<tr>
                        <td>'.$idCliente.'</td>
                        <td>'.$nomCliente.'</td>
                        <td>
                            <span class="view_data" id="'.$idCliente.'">Ver</span>
                            <span class="edit_data" id="'.$idCliente.'">Editar</span>
                        </td>
                    </tr>';
        }
        $stmtPD->close();

        $strs .= '</tbody></table><div class="pagination"><ul class="pagination">';

        $stmtPD = $con->prepare("SELECT * FROM cliente");
        $stmtPD->execute();
        $stmtPD->store_result();

        $BD_records = $stmtPD->num_rows;
        $stmtPD->close();
        $con->close();

        $total_page = ceil($BD_records / $records_by_page);
        $prev = $page - 1;
        $next = $page + 1;

        if ($prev > 0) {
            $strs .= "<li><a data-target='" . $pagination_page . "?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
            $strs .= "<li><a data-target='" . $pagination_page . "?page=$prev'><i class='icon-angle-left'></i></a></li>";
        }

        for ($i = 1;$i <= $total_page;$i++) {
            if ($page == $i) {
                $strs .= "<li><a class='page-link active' >" . $page . "</a></li>";
            } else {
                $strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$i'>$i</a></li>";
            }
        }

        if ($page < $total_page) {
            $strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$next'><i class='icon-angle-right'></i></a></li>";
            $strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
        }

        $strs .= '</ul></div>';

        echo $strs;
        
        else:
            $stmtPD->close();
            echo "no records..";
    endif;
?>

我的表格数据示例:

idCliente    nomCliente    typeCliente    dateCliente
    1          Google         VIP        2021-03-30 22:00:58.277400
    2      StackOverflow      PRIME      2021-03-30 21:00:58.277400

Answer 1

我猜pagination.php有代码连接数据库，构造一个SELECT语句来获取所需的行，然后将它们传递回前端？
我看到了?page=<<number>> ，但(还)没有关于页面大小，也没有关于过滤。
建议在 JS 中构建这个并发送它:

pagination.php?page=3&page_size=25&color=green&size=big

然后，在 PHP 中，使用 $_GET查看发送了哪些参数，并对传递的任何参数使用react(和 ! empty() )。
然后构造所需的查询，例如:

SELECT ...
    FROM ...
    WHERE color = 'green'
      AND size = 'big'
    ORDER BY ...
    LIMIT 50, 25

执行那个；得到结果； json_encode()他们;并响应 AJAX 查询。
然后，在 JS 内部，您需要一个回调来接收该结果并将其呈现给用户。
使用 XHR 而不是 AJAX 可能会更好，因为您实际上并不需要 AJAX 的“异步”部分。