Luego teTambien he actualizado un pocomodernizado el código AJAX.
una de ellas $.ajax({
por var request = $.ajax({
En mi ejemplo he usado la página test1.php, la debes cambiar por la tuya pagination.phpBase de Datos y también use mi BD, con lo cual, tendrás que poner tus nombres de tabla y columnas.
CREATE TABLE `cliente` (
`idCliente` smallint(3) UNSIGNED NOT NULL,
`nomCliente` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
`dateMember` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`roll` varchar(30) COLLATE utf8_spanish_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
INSERT INTO `cliente` (`idCliente`, `nomCliente`, `dateMember`,`roll`) VALUES
(1, 'Daniel', '2021-04-08 00:00:00', 'rol1'),
(2, 'Joe', '2021-04-11 00:00:00', 'rol1'),
(3, 'Alicia', '2021-04-13 00:00:00', 'rol2'),
(4, 'Marcos', '2021-04-13 00:00:00', 'rol1'),
(5, 'Melanie', '2021-04-15 00:00:00', 'rol3'),
(6, 'Thalia', '2021-04-15 00:00:00', 'rol1'),
(7, 'David', '2021-04-15 00:00:00', 'rol1');
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
$(function() {
// Obtenemos URL paginacion
$('.data-pagination').on('click', '.pagination li a', function(evt) {
evt.preventDefault();
url = $(this).attr('data-target');
//alert(url);
ajaxLoad(url);
});
// Filtros (Puedes crear los filtros que deseas, simplmente recuerda añadirlo a tu objeto var'var query_paramsquery_params')
//
// Amount
$('#amount_show').change(function(evt) { // change / click(function()
evt.preventDefault();
ajaxLoad('test1'pagination.php');
});
// Fecha
$('#date_show').change(function(evt) {
evt.preventDefault();
var date = $(this).val();
console.log(date, 'change');
ajaxLoad('test1'pagination.php');
});
// Buscador
$( "input[type='text']#buscador_show" ).change(function(evt) {
evt.preventDefault();
var txt = $(this).val();
console.log(txt);
ajaxLoad('test1'pagination.php');
});
// Cargar contenido dinamico
function ajaxLoad(url) {
// Creamos objeto con nuestros filtros (si creas mas filtros recuerda añadirlo a utu objeto)
var query_params = {
amount_show: $('#amount_show').val(),
fecha: $('#date_show').val(),
buscador: $('#buscador_show').val()
// etc
};
// AJAX
var request = $.ajax({
method: "GET",
url: url,
data: jQuery.param(query_params),
dataType: "html"
});
// Success
request.done(function(data) {
// Elimino header, ya que se me repite dos veces.
$('header').remove()
//$('.data-pagination').fadeOut("fast", function() { $(this).html(data).fadeIn("fast") })
//
// Cargar nuevo contenido
$('.data-pagination').html('');
$('.data-pagination').html(data).fadeIn('fast');
});
// Error
request.fail(function(jqXHR, textStatus) {
alert("Ocurrió un error inesperado (paginador): " + textStatus);
});
}
});
</script>
</head>
<body>
<header>
<h1>Soy una prueba</h1>
<select id="amount_show" name="amount_show">
<option value="1" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 1) echo "selected"; ?>>1</option>
<option value="2" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 2) echo "selected"; ?> >2</option>
<option value="3" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 3) echo "selected"; ?>>3</option>
<option value="100" <?php if (isset($_GET['amount_show']) && $_GET['amount_show'] == 100) echo "selected"; ?>>100</option>
</select>
<input id="date_show" type="date" name="fecha" <?php if ( isset($_GET['fecha']) ) echo "value = '{$_GET['fecha']}'"; ?> >
<input id="buscador_show" type="text" name="buscador" placeholder="Buscador" <?php if ( isset($_GET['buscador']) ) echo "value = '{$_GET['buscador']}'"; ?>>
</header>
<div class="data-pagination">
<?php
$strs = '';
$pagination_page = 'test1'pagination.php';
$defaul_records = 1;
// Si esta definida nuestra paginacion
if (isset($_GET['page'])) {
$page = $_GET['page'] ? : '';
//var_dump($_GET);
} else {
$page = 1;
}
// Si esta definida total de registros a mostrar y que sea mayor a uno que es su valor por defecto.
if (isset($_GET['amount_show']) && $_GET['amount_show'] > 1) { // && $_GET['amount_show'] > 1 sin esto ay muchas ocasiones que me marcaba un error, asi que obtengo el select si es mayor que nuestro default selecionado
$records_by_page = $_GET['amount_show'];
//var_dump($_GET);
} else {
$records_by_page = $defaul_records;
}
// Si esta definida nuestra fecha
if ( isset($_GET['fecha']) ) {
$fecha_sql = $_GET['fecha'] ?: '';
}
// Si esta defenida nuestra buscador
if ( isset($_GET['buscador']) ) {
$txt = $_GET['buscador'] ?: '';
$txt = "%$txt%";
}
// Ubicación paginación.
$localization_sql = ($page - 1) * $records_by_page;
// Añadimos los filtros a nuestra sentencia SQL.
//
// Creamos nuestra sentencia segun el filtro o filtros obtenidos a la vez, asi podemos tambien filtrar varios filtros seleccionado con el on change en una peticion
//
// Filtramos solo por 'amount''fecha'. si existe, y 'fecha'.
//
if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') {
// SQL
$stmtPD = $con->prepare("SELECT titleidCliente,
subtitlenomCliente
FROM tutorialcliente
WHERE DATE(date_publicdateMember) = ?
ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
$stmtPD->bind_param('s', $fecha_sql);
// Filtramos porsolo 'amount'por si'palabra' existe, y por 'palabra'
//
} elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') {
// SQL
$stmtPD = $con->prepare("SELECT titleidCliente,
subtitlenomCliente
FROM tutorialcliente
WHERE titlenomCliente LIKE ?
ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
$stmtPD->bind_param('s', $txt);
// Filtramos por 'amount' si existe, 'fecha' y por 'palabra'
//
} elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') {
// SQL
$stmtPD = $con->prepare("SELECT titleidCliente,
subtitlenomCliente
FROM tutorialcliente
WHERE DATE(date_publicdateMember) = ? AND titlenomCliente LIKE ?
ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
$stmtPD->bind_param('ss', $fecha_sql,$txt);
// Filtro por defecto
//
} else {
// SQL
$stmtPD = $con->prepare("SELECT titleidCliente,
subtitlenomCliente
FROM tutorialcliente
ORDER BY ident_tutorialidCliente DESC LIMIT $localization_sql, $records_by_page");
}
// Ejecutar sentencia
$stmtPD->execute();
$stmtPD->store_result();
// Compruebas registros
if ($stmtPD->num_rows > 0):
ob_start();
// Muestras layout
$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">';
// Contamos registros a mostrar paginación según los filtros seleccionados
//
// Filtramos por fecha
if (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador'] =='') :
$stmtPD = $con->prepare("SELECT * FROM tutorialcliente WHERE DATE(date_publicdateMember) = ?");
$stmtPD->bind_param('s', $fecha_sql);
// Filtramos por palabra
elseif (isset($_GET['buscador']) && $_GET['buscador']!='' && $_GET['fecha'] == '') :
$stmtPD = $con->prepare("SELECT * FROM tutorialcliente WHERE titlenomCliente LIKE ?");
$stmtPD->bind_param('s', $txt);
// Filtramos por fecha y palabra
elseif (isset($_GET['fecha']) && $_GET['fecha'] != '' && $_GET['buscador']!='') :
$stmtPD = $con->prepare("SELECT * FROM tutorialcliente WHERE DATE(date_publicdateMember) = ? AND titlenomCliente LIKE ?");
$stmtPD->bind_param('ss', $fecha_sql,$txt);
// Default sin filtro
else :
$stmtPD = $con->prepare("SELECT * FROM tutorial"cliente");
endif;
$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'>Inicio</a></li>";
$strs .= "<li><a data-target='" . $pagination_page . "?page=$prev'><</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'>></a></li>";
$strs .= "<li><a class='page-link' data-target='" . $pagination_page . "?page=$total_page'>last</a></li>";
}
$strs .= '</ul></div>';
echo $strs;
else:
$stmtPD->close();
echo "no records..";
endif;
?>
</div>
</body>
</html>