Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

159
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda