{"id":6979,"date":"2018-07-20T10:06:51","date_gmt":"2018-07-20T10:06:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6979"},"modified":"2019-03-01T10:29:00","modified_gmt":"2019-03-01T10:29:00","slug":"datatables-jquery-plugin","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/datatables-jquery-plugin\/","title":{"rendered":"DataTables jQuery plugin"},"content":{"rendered":"

DataTables<\/strong> es un plugin para jQuery<\/strong> que permite agregar en las tablas de tu p\u00e1gina Web un aspecto liviano y las funciones para buscar, ordenar y paginar los resultados de forma r\u00e1pida. Es una herramienta altamente flexible, construida sobre los fundamentos de la mejora progresiva, que permite agregar f\u00e1cilmente todas estas funciones avanzadas a cualquier tabla HTML<\/strong>.<\/p>\n

Este plugin lo hemos usado en varios proyectos y la verdad es que no nos ha ido nada mal. Hemos salido airosos y nos ha ahorrado un tiempo de desarrollo apreciable.<\/p>\n

En el ejemplo en funcionamiento vamos a conectar con nuestra base de datos de productos para mostrarlos en una tabla a la que le aplicamos el formato DataTables<\/strong> usando Bootstrap 4<\/strong>. Usaremos PHP<\/strong> y MySQLi<\/strong> para conectar con una base de datos y obtener registros.<\/p>\n

Como de costumbre creamos un archivo config.php<\/em> donde haremos la conexi\u00f3n con la base de datos utilizando MySQLi <\/strong>orientado a objetos:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\ndefine<\/span><\/a>(<\/span>'DB_SERVER'<\/span>,<\/span> 'localhost'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'DB_SERVER_USERNAME'<\/span>,<\/span> 'YOUR USERNAME'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'DB_SERVER_PASSWORD'<\/span>,<\/span> 'YOUR PASSWORD'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'DB_DATABASE'<\/span>,<\/span> 'YOUR DATABASE'<\/span>)<\/span>;<\/span>\n \n$connexion<\/span> =<\/span> new<\/span> mysqli(<\/span>DB_SERVER,<\/span> DB_SERVER_USERNAME,<\/span> DB_SERVER_PASSWORD,<\/span> DB_DATABASE)<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
En el archivo principal, en este caso el index.php<\/em>\u00a0en la primera l\u00ednea haremos una inclusi\u00f3n del fichero config.php<\/em>, tal como sigue:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span> require<\/span>(<\/span>'config.php'<\/span>)<\/span>;<\/span> ?><\/span><\/pre><\/div><\/div>\n
Para que esto funcione, el archivo index.php<\/em> y config.php<\/em> deben estar en la misma ruta o directorio.<\/p>\n
En la cabecera de la p\u00e1gina o dentro de la etiqueta <head> agregamos los estilos y scripts necesarios para hacer funcionar el plugin datatables.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href<\/span>=<\/span>"https:\/\/cdn.datatables.net\/v\/bs4\/dt-1.10.18\/datatables.min.css"<\/span>\/<\/span>><\/span>\n<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"https:\/\/cdn.datatables.net\/v\/bs4\/dt-1.10.18\/datatables.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>\n$(document).ready( function () {\n    $('#datatable').DataTable();\n} );\n<\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En el ejemplo en funcionamiento estamos usando la versi\u00f3n CDN que nos facilita el plugin datatables. Incorporamos su hoja de estilos CSS<\/strong> y el archivo JavaScript<\/strong>. Seguidamente la llamada al plugin con los par\u00e1metros por defecto.<\/p>\n
En el caso de no interesarte usar las opciones CDN para tu sitio, en la p\u00e1gina oficial tienes un apartado para descargar o usar los archivos del complemento que m\u00e1s te interese. Donwload<\/a>.<\/p>\n
Despu\u00e9s, dentro del <body> tenemos nuestra tabla con id=\u00bbdatatable\u00bb para adoptar las caracter\u00edsticas que aporta el plugin:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\n$result<\/span> =<\/span> $connexion<\/span>-><\/span>query<\/span>(<\/span>\n    'SELECT * FROM product p \n    LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) \n    LEFT JOIN `image` i ON (i.id_product = p.id_product AND cover = 1) \n    WHERE active = 1 \n    ORDER BY date_upd DESC'<\/span>\n)<\/span>;<\/span>\n?><\/span>\n<?php<\/span> if<\/span> (<\/span>$result<\/span>-><\/span>num_rows<\/span> ><\/span> 0<\/span>)<\/span> {<\/span> ?><\/span>\n    <table id="datatable" class="table">\n        <thead>\n            <tr>\n                <th>Nombre<\/th>\n                <th>Version<\/th>\n                <th>Compatibilidad<\/th>\n                <th>Precio<\/th>\n            <\/tr>\n        <\/thead>\n        <?php<\/span> while<\/span> (<\/span>$row<\/span> =<\/span> $result<\/span>-><\/span>fetch_assoc<\/span>(<\/span>)<\/span>)<\/span> {<\/span> ?><\/span>\n            <tr>\n                <td><?php<\/span> echo<\/span> $row<\/span>[<\/span>'name'<\/span>]<\/span>;<\/span> ?><\/span><\/td>\n                <td><?php<\/span> echo<\/span> $row<\/span>[<\/span>'version'<\/span>]<\/span>;<\/span> ?><\/span><\/td>\n                <td><?php<\/span> echo<\/span> $row<\/span>[<\/span>'compatibility'<\/span>]<\/span>;<\/span> ?><\/span><\/td>\n                <td><?php<\/span> echo<\/span> round<\/span><\/a>(<\/span>$row<\/span>[<\/span>'price'<\/span>]<\/span>,<\/span> 2)<\/span>;<\/span> ?><\/span> EUR<\/td>\n                ...\n            <\/tr>\n        <?php<\/span> }<\/span> ?><\/span>\n    <\/table>\n<?php<\/span> }<\/span> ?><\/span><\/pre><\/div><\/div>\n
Como puedes observar, en el c\u00f3digo anterior hacemos una consulta de los productos y el resultado lo agregamos en la tabla solo en el caso de que haya registros.<\/p>\n
Con este c\u00f3digo obtenemos el siguiente aspecto para las tablas que resulta tambi\u00e9n mucho m\u00e1s elegante:<\/p>\n
\"\"<\/p>\n
Toda la documentaci\u00f3n de este plugin est\u00e1 bien redactada en la p\u00e1gina oficial. Eso si, en ingl\u00e9s. Ver documentaci\u00f3n<\/a>.<\/p>\n
Desde mi punto de vista tan solo le puedo poner 2 inconvenientes:<\/p>\n