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