La pregunta es un tanto antigua y conviene actualizar, no solo para optimizar, también para facilitar el mantenimiento a futuro. Mis recomendaciones:
- Desde PHP envía solo datos en formato JSON, que te ayudará a reducir significativamente el contenido de cada petición y, por consiguiente, el tiempo de respuesta
- En Javascript recibes los datos y generas el HTML necesario para agregar filas a la tabla y para generar los enlaces de paginación
- Agrega tantos campos de filtro como sean necesarios e inclúyelos todos en las peticiones, no importa si están vacíos o no, eso ya se resolverá al crear la consulta en PHP
- Para evitar errores, la tabla debe existir desde que se carga la página y se va modificando al obtener datos; lo mismo para la lista donde van a aparecer los enlaces de paginación
- Asigna una misma función para todos los campos y enlaces de paginación, tienen que estar relacionados para poder tener la funcionalidad esperada
- En los enlaces para ver/modificar clientes, no uses ID, porque son numéricos y se duplican. En su lugar usa atributo de datos:
data-id="id-de-cliente"
- Las plantillas de texto son ideales para crear HTML de enlaces y filas de la tabla.
// Página actual, se va a usar para peticiones y enlaces de paginación
let curPage = 1;
function loadAjax(page = 1) {
// Incluir todas las opciones de filtro y paginación
let params = {
pagina: page,
elementos: $('#elementos').val(),
tipo: $('#tipo-cliente').val(),
nombre: $('#nombre-cliente').val()
};
// Número de página actual, para crear enlaces
curPage = page;
$('.data-pagination').html('<li class="loading">Loading...</li>');
$.ajax({
type: "GET",
// Misma página para todos los filtros
url: 'paginacion.php',
// Enviar parámetros
data: params,
// Recibir respuesta como JSON
dataType: 'json',
// Ejecutar en función aparte
success: drawTable
}).fail(function(xhr, status, message) {
console.log(status, message);
curPage = 1;
$('.data-pagination').fadeOut('1000', function() {
$(this).html('Error cargando datos');
}).fadeIn('1000');
});
}
function drawTable(data) {
// Eliminar registros actuales en la tabla
$('.tr-cliente').remove();
let records = data.clientes.length;
let pages = parseInt(data.pages) || 1;
if(records == 0) {
// No hay información para mostrar
$('#empty').show();
$('.data-pagination').html('');
}
$('#empty').hide();
data.clientes.forEach(cliente => {
$('#data-table tbody').append(
`<tr class="tr-cliente">
<td>${cliente.idCliente}</td>
<td>${cliente.nomCliente}</td>
<td>${cliente.tipoCliente}</td>
<td>
<span class="view-data" data-id="${cliente.idCliente}">Ver</span>
<span class="edit-data" data-id="${cliente.idCliente}">Editar</span>
</td>
</tr>`
);
});
// Crear enlaces de paginación enviando total de páginas disponibles
pagination(pages);
}
// Crear elemento de lista con enlace de página
function getPageLink(page, text) {
if(!text) {
text = page;
}
return `<li><a href="#" data-page="${page}">${text}</a></li>`;
}
function pagination(pages) {
// Crear enlace anterior solo si página actual no es la primera
if(curPage > 1) {
$('.data-pagination').append(getPageLink(curPage - 1, 'Anterior'));
}
// Crear enlaces para todas las páginas disponibles
for(let i = 1; i <= pages; i++) {
$('.data-pagination').append(getPageLink(i));
}
// Crear enlace siguiente solo si página actual no es la última
if(curPage < pages) {
$('.data-pagination').append(getPageLink(curPage + 1, 'Siguiente'));
}
}
$(function() {
// Escuchar cambios en campos de filtro, se pueden seleccionar todos en una misma línea
$('#elementos, #tipo-cliente, #nombre-cliente').change(loadAjax);
// Escuchar eventos para ver y editar, delegados a la tabla
$('#data-table').on('click', '.view-data', function() {
// Obtener ID
let idCliente = $(this).data('id');
console.log('Ver: ' + idCliente);
// Aquí lo que necesites hacer para mostrar más información
});
$('#data-table').on('click', '.edit-data', function() {
// Obtener ID
let idCliente = $(this).data('id');
console.log('Editar: ' + idCliente);
// Aquí lo que necesites hacer para editar
});
// Escuchar eventos en enlaces de paginación, delegados a UL
$('.data-pagination').on('click', 'li a', function(e) {
e.preventDefault();
let page = parseInt($(this).data('page')) || 1;
console.log(page);
loadAjax(page);
});
// Ejecutar con valores por defecto
loadAjax();
});
/* *********** PROBANDO ********
* Este es un ejemplo de la estrucutra que debes recibir desde PHP
*/
let data = {
// El total de páginas debe ser 1, pero...
pages: 5, // ...solo para mostrar más enlaces y ver que funciona
clientes: [
{ idCliente: 1, nomCliente: 'StackOverflow', tipoCliente: 'Normal' },
{ idCliente: 2, nomCliente: 'Apple', tipoCliente: 'Distribuidor' },
{ idCliente: 3, nomCliente: 'Google', tipoCliente: 'Mayorista' },
]
};
//
setTimeout(drawTable, 1000, data);
/* ********** Fin de pruebas ********** */
#data-table {
margin:20px auto;
}
.data-pagination {
list-style:none;
margin:20px 0;
text-align:center;
}
.data-pagination li {
display:inline-block;
margin:0;
padding:0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Elmentos por página:
<select id="elementos" name="elementos">
<option value="10" selected>10</option>
<option value="25" >25</option>
<option value="50" >50</option>
<option value="100">100</option>
</select>
</div>
<div>Filtrar por tipo:
<select id="tipo-cliente" name="tipo-cliente">
<option value="" selected>Todos</option>
<option value="normal">Normal</option>
<option value="distribuidor">Distribuidor</option>
<option value="mayorista">Mayorista</option>
</select>
</div>
<div>Buscar por nombre:
<input type="text" id="nombre-cliente" name="nombre-cliente" value="">
</div>
<table id="data-table" class="table bootgrid-table">
<thead>
<tr>
<th>ID</th>
<th>CLIENTE</th>
<th>TIPO</th>
<th>ACCIÓN</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" id="empty">No hay información para mostrar</td>
</tr>
</tbody>
</table>
<ul class="data-pagination"></ul>
En PHP vas a recibir en $_GET
lo siguiente: pagina, elementos, tipo y nombre. Y debes validar cada uno para saber si se deben incluir en la consulta, de preferencia, con asignación ternaria; por ejemplo:
// Si está en $_GET, debe ser entero, de lo contrario, se asigna 1
$pagina = (!empty($_GET['pagina'])) ? (int) $_GET['pagina'] : 1;
// Valor en $_GET o cadena vacía
$nombre = (!empty($_GET['nombre'])) ? $_GET['nombre'] : '';
Ya teniendo todas las variables, debes analizar cada una para saber si es necesario agregarla a filtros y vas a necesitar ejecutar dos consultas, una para contar las filas y otra para obtenerlas. Revisa los comentarios en el código para saber qué hace cada cosa.
<?php
// Obtener todos los parámetros necesarios
$pagina = (!empty($_GET['pagina'])) ? (int) $_GET['pagina'] : 1;
$elementos = (!empty($_GET['elementos'])) ? (int) $_GET['elementos'] : 1;
$tipo = (!empty($_GET['tipo'])) ? $_GET['tipo'] : '';
$nombre = (!empty($_GET['nombre'])) ? $_GET['nombre'] : '';
// Crear un arreglo para filtros, tipo de parámetros y valores de remplazo
$filtros = [];
$tipos = '';
$valores = [];
// Verificar tipo para agregar a filtros
if($tipo != '') {
$tipos .= 's'; // Si es entero, cambia por 'i'
$filtros[] = 'tipoCliente = ?';
$valores[] = $tipo;
}
// Verificar nombre para agregar a filtros
if($nombre != '') {
$tipos .= 's';
$filtros[] = 'nombre LIKE ?';
$valores[] = "%$nombre%";
}
// Crear cadena de filtro, solo si se seleccionó una o más opciones
$filtro = (count($filtros) > 0) ? 'WHERE ' . implode(' AND ', $filtros) : '';
// Crear el arreglo a devolver como JSON
$data = [
'pages' => 1, // Total de páginas disponibles
'clientes' => [] // Clientes encontrados
];
// Contar total de filas encontradas
$smCuenta = $con->prepare("SELECT COUNT(*) as total FROM cliente $filtro");
// Agregar valores de filtros
if(count($filtros) > 0) {
$smCuenta->bind_param($tipos, ...$valores);
}
$smCuenta->execute();
$smCuenta->store_result();
$smCuenta->bind_result($total);
// Leer consulta
$smCuenta->fetch();
$smCuenta->close();
// Solo si se encontaron filas
if($total > 0) {
// Actualizar total de páginas disponibles
$data['pages'] = ceil($total / $elementos);
// Calcular inicio de consulta
$offset = ($pagina - 1) * $elementos;
// Incluye todos los campos necesarios
$consulta = "SELECT idCliente, nomCliente, tipoCliente FROM cliente $filtro LIMIT $offset, $elementos";
$smCliente = $con->prepare($consulta);
if(count($filtros) > 0) {
$smCliente->bind_param($tipos, ...$valores);
}
$smCliente->execute();
$smCliente->store_result();
$smCliente->bind_result($idCliente, $nomCliente, $tipoCliente);
// Recorrer resultados
while($smCliente->fetch()) {
// Insertar datos en arreglo
$data['clientes'][] = [
'idCliente' => $idCliente,
'nomCliente' => $nomCliente,
'tipoCliente' => $tipoCliente
];
}
$smCliente->close();
}
// Devolver arreglo con total de páginas y filas encontradas
echo json_encode($data);
En este ejemplo solo se agregaron dos opciones para filtrar, pero fácilmente puedes agregar más:
- Crea el campo en HTML
- En Javascript escucha los cambios para llamar a la función
loadAjax()
- En la función agrega el campo y su valor en los parámetros de la petición
- En PHP crea la variable correspondiente y analiza para agregar a las variables para filtros, tipos y valores
- Si requieres más columnas para la tabla:
- Modifica la tabla HTML para agregar la columna
- En Javascript modifica la función
drawTable()
para mostrar esa columna
- En PHP modifica la consulta, junto con
->bind_result()
y agrega el dato en el arreglo