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 información de manera más ordenada mediante filas y columnas y con un alto fijo para mostrar más filas en el scroll. Pero añadir scroll a las tablas no es una solución muy amigable que digamos, podemos crear una paginación en las tablas de Bootstrap para hacerlas más usables. Por lo tanto, en este tutorial veremos cómo 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 dinámico extraído 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 después:

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 librería Bootstrap y  jQuery. Ojo, también tendremos que incluir el archivo responsable de realizar la paginación 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 dinámico de nuestra tabla MySQL a la cual hemos llamado developers. Definiremos nuestro tbody con el id “developers” para crear la paginación.

<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 sección donde se va a mostrar la paginación.

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

Crear la paginación con Bootstrap

Por último en pagination.js tendremos que llamar a la función pageMe({}) y pasarle el id del body de nuestra tabla para crear la paginación. Utilizaremos las opciones para limitar los registros por página y mostrar los botones de Anterior y Siguiente.

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