Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

157
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!