¿Quiere integrar DataTable en su aplicación? DataTable agrega controles de interacción avanzados a sus tablas HTML. Además, es de código abierto para que todos puedan usarlo gratis. Es útil cuando su tabla tiene cientos de entradas. Usando DataTable, obtendrá sus características integradas como clasificación, búsqueda, paginación, etc. En este artículo, le muestro cómo usar DataTable en PHP.
DataTables es una opción popular para listar registros tabulares en la aplicación. Debido a su simplicidad y fácil instalación, los desarrolladores prefirieron usarlo.
Para nuestro tutorial, crearé una tabla en la base de datos y mostraré sus registros en DataTable. La salida final se verá como la siguiente captura de pantalla:
Empezando
Para comenzar, diríjase a su phpMyAdmin y cree la tabla usando la siguiente consulta:
CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT,
`first_name` varchar(255) NOT NULL,
`last_name` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;La tabla ‘usuarios’ tiene columnas first_name, last_name y age. Agregue entradas ficticias en esta tabla. El usuario puede usar la biblioteca Faker para sembrar su tabla con entradas ficticias. Usando la biblioteca de falsificaciones, se pueden agregar miles de entradas falsas en la base de datos en unos momentos.
A continuación, cree un config.phparchivo y escriba un código para la conexión a la base de datos.
config.php
<?php
$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if ($conn->connect_errno) {
echo "Error: ". $conn->connect_error;
}Asegúrese de reemplazar los marcadores de posición con los valores reales.
Cómo usar DataTable en PHP
Para integrar DataTable, lo que voy a hacer es buscar registros de la base de datos, recorrerlos y mostrarlos en una tabla. Y luego aplique DataTable a la tabla HTML.
Cree un index.phparchivo y agregue el código a continuación.
<?php
require_once('config.php');
$sql = "SELECT id, first_name, last_name, age FROM users";
$result = $conn->query($sql);
$arr_users = [];
if ($result->num_rows > 0) {
$arr_users = $result->fetch_all(MYSQLI_ASSOC);
}
?>En el código anterior, obtuve todas las filas de la tabla ‘usuarios’ y las asigné a la variable PHP $arr_users. Ahora, recorreré esta variable y crearé la fila de la tabla una por una.
<table id="userTable">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</thead>
<tbody>
<?php if(!empty($arr_users)) { ?>
<?php foreach($arr_users as $user) { ?>
<tr>
<td><?php echo $user['first_name']; ?></td>
<td><?php echo $user['last_name']; ?></td>
<td><?php echo $user['age']; ?></td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>Aquí, le di una identificación ‘userTable’ a la tabla. Lo siguiente que debo hacer es incluir los archivos requeridos de DataTable en el HTML.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>Finalmente, llame al método DataTable() en la identificación de la tabla dada.
<script>
$(document).ready(function() {
$('#userTable').DataTable();
});
</script>Nuestro código final es el siguiente;
<?php
require_once('config.php');
$sql = "SELECT id, first_name, last_name, age FROM users";
$result = $conn->query($sql);
$arr_users = [];
if ($result->num_rows > 0) {
$arr_users = $result->fetch_all(MYSQLI_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Datatable</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
</head>
<body>
<table id="userTable">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</thead>
<tbody>
<?php if(!empty($arr_users)) { ?>
<?php foreach($arr_users as $user) { ?>
<tr>
<td><?php echo $user['first_name']; ?></td>
<td><?php echo $user['last_name']; ?></td>
<td><?php echo $user['age']; ?></td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#userTable').DataTable();
});
</script>
</body>
</html>Espero que pueda aprender a usar DataTable en PHP. Comparta sus pensamientos en la sección de comentarios a continuación.
Artículos relacionados
- Cómo convertir HTML a PDF en PHP
- Cómo exportar datos de bases de datos MySQL a Excel usando PHP
- Cómo leer archivos CSV y Excel en PHP usando PhpSpreadsheet