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