En este tutorial voy a explicar como crear una paginación con PHP y Jquery.
Añadiremos un extra, que se podrá filtrar.
Librerías que necesitaremos para llevar a cabo la paginación.
Yo al plugin le he añadido un extra, que indique el total de resultados.
Si se lo queréis añadir ir a al método _draw situaros en la linea 175 y añadir el siguiente codigo
// Añade el total de registro y muestra los registros actuales x - x de X
// @date 2015-09-01
var ttreg = (o.currentPage+1)*o.itemsOnPage;
if(ttreg > o.items){
ttreg = o.items;
}
$(''+(o.itemsOnPage*(((o.currentPage+1)-1))+1)+' - '+ttreg+' de '+o.items+'').appendTo(this);Codigo HTML
Col1
Col2
Col3
-> Total registros
-> Total registros por página
-> Url donde se harán las peticiones cuando pasemos de página
Codigo PHP
_connect();
if(isset($_GET['search-user-form'])){
$return = array();
$recordsPerPage = 6;
$user = $_GET['nombre_user'];
$email = $_GET['email_user'];
if(!empty($user) || !empty($email)):
$query= "SELECT nombre,email,password FROM tuser WHERE nombre LIKE '%$user%' AND email LIKE '%$email%' ";
$res = $db->conexion->query($query);
$t_records = $res->num_rows;
if($t_records > 0):
$n_page = isset($_GET['page']) ? $_GET['page'] : 1;
if($n_page == 1){
$p_inicio = 0;
}else{
$p_inicio = ($n_page - 1) * $recordsPerPage;
}
$query2 = $query." LIMIT $p_inicio,$recordsPerPage";
$res2 = $db->conexion->query($query2);
$return['html'] = '';
while ($f = $res2->fetch_assoc()) {
$return['html'] .= '';
$return['html'] .= ''.utf8_encode($f['nombre']).' ';
$return['html'] .= ''.$f['email'].' ';
$return['html'] .= ''.$f['password'].' ';
$return['html'] .= ' ';
}
$return['totalRecords'] = $t_records;
$return['totalRecordsPage'] = $recordsPerPage;
else:
$return['error'] = true;
$return['error_t'] = 2;
$return['error_msg'] = 'No hay resultados';
endif;
else:
$return['error'] = true;
$return['error_t'] = 3;
$return['error_msg'] = 'Tienes que rellenar al menos un campo';
endif;
echo json_encode($return);
}
Aquí es donde se complica mas la cosa con el código javascript.
Esto es para poder filtrar los resultados
$('.contenedor').on('click','.btn-search-new',function(event){
event.preventDefault();
var node = $(this).parent().parent();
var form = node.children('form');
var table = node.find('div table');
var pagnav = node.children('.smpagination');
var inurl = form.children('input[name=search-url]').val();
if(inurl.indexOf('?') >= 0){
var url = inurl+'&'+form.serialize();
}else{
var url = inurl+'?'+form.serialize();
}
if(typeof url != 'undefined'){
infeLoading();
$.getJSON(url, function(data) {
infeLoading('hidden');
if(data.error){
table.parent().removeAttr('style');
table.children('tbody').html('');
pagnav.pagination('destroy');
infeError(node,data.error_msg,data.error_t);
}else{
node.children('input[name=totalRecords]').val(data.totalRecords);
node.children('input[name=totalRecordsPage]').val(data.totalRecordsPage);
table.children('tbody').html(data.html);
infePagination('#'+node.attr('id'),true);
}
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log(err);
});
}
});
Y aquí esta la función donde se crea la paginación, al hacer click en el numero de página vaya a buscar los registros de la página.
function infePagination(pagination,refresh,pagStatic){
var refresh = typeof refresh !== 'undefined' ? refresh : false;
var pagStatic = typeof pagStatic !== 'undefined' ? pagStatic : false;
var node = $(pagination);
var error = node.children('.alert');
var trecords = parseInt(node.children('input[name=totalRecords]').val());
var form = node.children('.searchform');
var table = node.find('div table');
var items = table.find('tbody tr');
var pagnav = node.children('.smpagination');
if(refresh){
pagnav.pagination('destroy');
}
if(trecords > 0){
//Eliminar si ha habido error antes
if(error.length > 0){
error.removeClass().addClass('alert').text('');
}
var trecordsPerPage = 15;
if(node.children('input[name=totalRecordsPage]').length > 0){
var trecordsPerPage = parseInt(node.children('input[name=totalRecordsPage]').val());
}
//Si hay menos no creamos el paginador
if(trecords > trecordsPerPage){
var searchform = typeof form !== 'undefined' ? form.serialize() : '';
var url = node.children('input[name=getUrl]').val();
//Verificar que haya url o si es estatico
if(typeof url != 'undefined' || pagStatic){
//Hacer la tabla estatica en caso de que en una pagina(de la tabla) hubiera menos resultados
if(pagStatic){
items.slice(trecordsPerPage).hide();
}else{
var htable = table.children('tbody').height();
table.parent().css('height',htable+20);
}
//Crear el paginador
pagnav.pagination({
prevText: '«',
nextText: '»',
items: trecords,
itemsOnPage: trecordsPerPage,
cssStyle: 'compact-theme',
onPageClick: function(pageNum,event){
event.preventDefault();
//Asociar al evento de onPageClick hacer una busqueda
//para la siguiente pagina
if(pagStatic){
var showFrom = trecordsPerPage * (pageNum - 1);
var showTo = showFrom + trecordsPerPage;
items.hide().slice(showFrom, showTo).show();
}else{
//Crear la url donde se hará la petición con los parámetros adecuados
//Añadiremos el form de filtrado también
var inurl = form.children('input[name=search-url]').val();
if(inurl.indexOf('?') >= 0){
var url = inurl+'&'+form.serialize()+'&page='+pageNum;
}else{
var url = inurl+'?'+form.serialize()+'&page='+pageNum;
}
infeLoading('Cargando registros....');
$.getJSON(url, function(data) {
infeLoading('hidden');
if(data.error){
table.parent().removeAttr('style');
table.children('tbody').html('');
pagnav.pagination('destroy');
infeError(node,data.error_msg,data.error_t);
}else{
table.children('tbody').html(data.html);
}
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ", " + error;
console.log(err);
});
}
}
});
}
}
}else{
table.parent().removeAttr('style');
table.children('tbody').html('');
pagnav.pagination('destroy');
infeError(node,'No hay resultados',2);
}
}
Ejemplo
El ejemplo contra la base de datos no es 100% funcional porque no se conecta a una BD.