Thursday, 8 April 2021

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


from How to add more filter yet pager using Ajax

No comments:

Post a Comment