Crear tablas paginadas de Bootstrap con jQuery

Las tablas de Bootstrap son tablas HTML personalizadas mediante la clase .table. Estas tablas de Bootstrap son totalmente responsive gracias a la clase .table-responsive y pueden ser utilizadas para todo tipo de aplicaciones web. Normalmente solemos utilizar las tablas HTML para mostrar la informacin de manera ms ordenada mediante filas y columnas y con un alto fijo para mostrar ms filas en el scroll. Pero aadir scroll a las tablas no es una solucin muy amigable que digamos, podemos crear una paginacin en las tablas de Bootstrap para hacerlas ms usables. Por lo tanto, en este tutorial veremos cmo crear tablas paginadas de Bootstrap con jQuery.

Este ser la estructura de archivos que utilizaremos en este tutorial:

  • index.php
  • pagination.php
  • bootstrap-table-pagination.js

Crear tabla MySQL

En este tutorial, mostraremos en nuestra tabla Bootstrap contenido dinmico extrado de la base de datos MySQL. Por lo tanto, tenemos que crear una tabla, a la cual llamaremos developers, mediante esta query:

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`designation` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Insertaremos algunos registros en esta tabla para mostrarlos despus:

INSERT INTO `developers` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'Jhonson', 'Newyork', 'Male', 'Software Engineer', 34, 'image_1.jpg'),
(2, 'Sonya Frost', 'London', 'Female', 'Web Developer', 28, 'image_2.jpg'),
(3, 'Laeeq Khan', 'Delhi, India', 'Male', 'Web Developer', 32, 'image_3.jpg'),
(4, 'Smith', 'London', 'Male', 'Perl Developer', 27, 'image4.jpg'),
(5, 'William', 'Paris', 'Male', 'Java Developer', 28, 'image5.jpg'),
(6, 'Jhon', 'Sydney', 'Male', 'UI Developer', 30, 'image6.jpg'),
(7, 'Steven', 'London', 'Male', 'UI Developer', 34, 'image7.jog'),
(8, 'Rhodes', 'Newyork', 'Male', 'Web Developer', 25, 'image8.jpg');

Incluir Bootstrap y jQuery

Tenemos que incluir los ficheros de la librera Bootstrap y jQuery. Ojo, tambin tendremos que incluir el archivo responsable de realizar la paginacin en las tablas.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/bootstrap-table-pagination.js"></script>
<script src="js/pagination.js"></script>

Crear tabla HTML con datos de MySQL

Ahora, en index.php, crearemos una tabla Bootstrap con contenido dinmico de nuestra tabla MySQL a la cual hemos llamado developers. Definiremos nuestro tbody con el id developers para crear la paginacin.

<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
</tr>
</thead>
<tbody id="developers">
<?php
$sql_query = "SELECT id, name, gender, address, designation, age FROM developers LIMIT 20";
$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
while( $developer = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td><?php echo $developer ['id']; ?></td>
<td><?php echo $developer ['name']; ?></td>
<td><?php echo $developer ['age']; ?></td>
<td><?php echo $developer ['gender']; ?></td>
<td><?php echo $developer ['address']; ?></td>
<td><?php echo $developer ['designation']; ?></td>
</tr
<?php } ?>
</tbody>
</table>
</div>

Hay que tener en cuenta la seccin donde se va a mostrar la paginacin.

<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="developer_page"></ul>
</div>

Crear la paginacin con Bootstrap

Por ltimo en pagination.js tendremos que llamar a la funcin pageMe({}) y pasarle el id del body de nuestra tabla para crear la paginacin. Utilizaremos las opciones para limitar los registros por pgina y mostrar los botones de Anterior y Siguiente.

$(document).ready(function() {
$('#developers').pageMe({
pagerSelector: '#developer_page',
showPrevNext: true,
hidePageNumbers: false,
perPage: 3
});
});

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.