{"id":28328,"date":"2021-05-24T14:06:00","date_gmt":"2021-05-24T11:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28328"},"modified":"2021-10-17T16:47:59","modified_gmt":"2021-10-17T13:47:59","slug":"como-usar-datatable-en-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-usar-datatable-en-php\/","title":{"rendered":"C\u00f3mo usar DataTable en PHP"},"content":{"rendered":"

\u00bfQuiere integrar DataTable en su aplicaci\u00f3n? DataTable agrega controles de interacci\u00f3n avanzados a sus tablas HTML. Adem\u00e1s, es de c\u00f3digo abierto para que todos puedan usarlo gratis. Es \u00fatil cuando su tabla tiene cientos de entradas. Usando DataTable, obtendr\u00e1 sus caracter\u00edsticas integradas como clasificaci\u00f3n, b\u00fasqueda, paginaci\u00f3n, etc. En este art\u00edculo, le muestro c\u00f3mo usar DataTable en PHP.<\/p>\n

DataTables<\/a> es una opci\u00f3n popular para listar registros tabulares en la aplicaci\u00f3n. Debido a su simplicidad y f\u00e1cil instalaci\u00f3n, los desarrolladores prefirieron usarlo.<\/p>\n

Para nuestro tutorial, crear\u00e9 una tabla en la base de datos y mostrar\u00e9 sus registros en DataTable. La salida final se ver\u00e1 como la siguiente captura de pantalla:<\/p>\n

Empezando<\/h3>\n

Para comenzar, dir\u00edjase a su phpMyAdmin y cree la tabla usando la siguiente consulta:<\/p>\n

CREATE TABLE `users` (\u00a0`id` int(11) NOT NULL AUTO_INCREMENT,\n\u00a0`first_name` varchar(255) NOT NULL,\n\u00a0`last_name` varchar(255) NOT NULL,\n\u00a0`age` int(11) NOT NULL,\n\u00a0PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n
La tabla ‘usuarios’ tiene columnas first_name, last_name y age. Agregue entradas ficticias en esta tabla. El usuario puede usar la biblioteca Faker<\/a> 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.<\/p>\n
A continuaci\u00f3n, cree un config.php<\/code>archivo y escriba un c\u00f3digo para la conexi\u00f3n a la base de datos.<\/p>\n
config.php<\/strong><\/p>\n
<?php\n$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);\n\u00a0\nif ($conn->connect_errno) {\n\u00a0\u00a0\u00a0\u00a0echo \"Error: \". $conn->connect_error;\n}<\/code><\/pre>\n
Aseg\u00farese de reemplazar los marcadores de posici\u00f3n con los valores reales.<\/p>\n
C\u00f3mo usar DataTable en PHP<\/h3>\n
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.<\/p>\n
Cree un index.php<\/code>archivo y agregue el c\u00f3digo a continuaci\u00f3n.<\/p>\n
<?php\nrequire_once('config.php');\n\u00a0\n$sql = \"SELECT id, first_name, last_name, age FROM users\";\n$result = $conn->query($sql);\n$arr_users = [];\nif ($result->num_rows > 0) {\n\u00a0\u00a0\u00a0\u00a0$arr_users = $result->fetch_all(MYSQLI_ASSOC);\n}\n?><\/code><\/pre>\n
En el c\u00f3digo anterior, obtuve todas las filas de la tabla ‘usuarios’ y las asign\u00e9 a la variable PHP $arr_users<\/code>. Ahora, recorrer\u00e9 esta variable y crear\u00e9 la fila de la tabla una por una.<\/p>\n
<table id=\"userTable\">\n\u00a0\u00a0\u00a0\u00a0<thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>First Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Last Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Age<\/th>\n\u00a0\u00a0\u00a0\u00a0<\/thead>\n\u00a0\u00a0\u00a0\u00a0<tbody>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php if(!empty($arr_users)) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach($arr_users as $user) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['first_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['last_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['age']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/tbody>\n<\/table><\/code><\/pre>\n
Aqu\u00ed, le di una identificaci\u00f3n ‘userTable’ a la tabla. Lo siguiente que debo hacer es incluir los archivos requeridos de DataTable en el HTML.<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.21\/css\/jquery.dataTables.min.css\"\/>\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"\/\/cdn.datatables.net\/1.10.21\/js\/jquery.dataTables.min.js\"><\/script><\/code><\/pre>\n
Finalmente, llame al m\u00e9todo DataTable() en la identificaci\u00f3n de la tabla dada.<\/p>\n
<script>\n$(document).ready(function() {\n\u00a0\u00a0\u00a0\u00a0$('#userTable').DataTable();\n});\n<\/script><\/code><\/pre>\n
Nuestro c\u00f3digo final es el siguiente;<\/p>\n
<?php\nrequire_once('config.php');\n\u00a0\n$sql = \"SELECT id, first_name, last_name, age FROM users\";\n$result = $conn->query($sql);\n$arr_users = [];\nif ($result->num_rows > 0) {\n\u00a0\u00a0\u00a0\u00a0$arr_users = $result->fetch_all(MYSQLI_ASSOC);\n}\n?>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Datatable<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.21\/css\/jquery.dataTables.min.css\"\/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<table id=\"userTable\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>First Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Last Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Age<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tbody>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php if(!empty($arr_users)) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach($arr_users as $user) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['first_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['last_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['age']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tbody>\n\u00a0\u00a0\u00a0\u00a0<\/table>\n\u00a0\u00a0\u00a0\u00a0<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"\/\/cdn.datatables.net\/1.10.21\/js\/jquery.dataTables.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0$(document).ready(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#userTable').DataTable();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Espero que pueda aprender a usar DataTable en PHP. Comparta sus pensamientos en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n