Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

158
Visualizações
How to add more filter yet pager using Ajax

I have the following ajax structure that allows me to display 10, 25, 50 and, 100 records

$(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');
            }
        });
    }
});

According to what I selected from the following HTML structure, ajax, it brings me the results sent correctly.

<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>

But I still can't understand how I can add more filters to my pager, for example type of client, type of user or a search engine.

Or search filter by date, I want to add so many filters to my pagination, but for this I need a little push of how to proceed.

This is my PHP code, can you explain to me how I can add more filters to the pager.

<?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;
?>

Example of my table data:

idCliente    nomCliente    typeCliente    dateCliente
    1          Google         VIP        2021-03-30 22:00:58.277400
    2      StackOverflow      PRIME      2021-03-30 21:00:58.277400
over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

I would guess that pagination.php has code to connect to the database, construct a SELECT statement to fetch the desired rows, then deliver them back to the frontend?

I see ?page=<<number>>, but nothing (yet) about page size, nor about filtering.

Suggest constructing this inside the JS and send it:

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

Then, inside the PHP, use $_GET to see which arguments were sent, and react to whatever parameters are passed (and ! empty()).

Then construct the desired query, something like:

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

Peform that; get the results; json_encode() them; and respond to the AJAX query.

Then, inside the JS, you need a callback to receive that result and present it to the user.

You might be better off with XHR instead of AJAX, since you don't really need the "Asynchronous" part of AJAX.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda