DataTables y WordPress

En algunos proyectos he necesitado usar DataTables para pintar información de la base de datos de forma atractiva.

Pero no solo necesitaba pintar los datos, sino que necesitaba hacer operaciones de ordenación y búsqueda de manera rápida.

Quería cacharrear para poder usar Ajax DataTables en WordPress y lo he detallado en esta entrada, explicando poco a poco, los pasos que se han seguido para ello.

Cargar el CSS y JS de los DataTables

Para hacer funcionar estos DataTables, es necesario cargar ciertos ficheros javascript y CSS, en el caso del datatable seleccionado, se debe cargar en el WordPress la siguiente dependencia CSS.

requisitos css datatables

Esto se realiza en el WordPress, dentro del fichero funcions.php de tu tema (mejor si es un tema hijo) de la siguiente manera:

Copiar

En cuanto al javascript, las dependencias a cargar son dos:

requisitos js datatables

Y de nuevo en el functions.php del tema se debe insertar el siguiente código.

Copiar

La carga de dependecias se hace a través del CDN, pero podrían descargarse dichos ficheros y subirlos para no depender de terceras plataformas.

Crear el template

Para nuestro ejemplo, se debe crear un nuevo template, aquí te explico cómo hacerlo.

Es importante que sepas cómo crear un template para llevar a cabo las siguientes acciones.

En este template vamos a definir el HTML del mismo, en el caso del datatable.

En el ejemplo, se va a hacer un listado de las entradas generadas, para ello, vamos a ejecutar una consulta SQL que va a atacar a la tabla wp_posts para obtener todas las entradas de la web.

Copiar

Ahora, con los resultados de esta consulta, los «introduciremos» en la tabla, en este caso, la tabla tiene 3 columnas: Nombre de la noticia, categoría(s) y el link a la misma.

Copiar

Inicializar el datatable

Dentro del mismo template, inicializamos el datatable, tan solo debes fijarte bien en el id de la tabla.

En el mismo código indicamos que los resultados aparezcan ordenados por la primera columna y orden ascendiente, luego, se ha quitado la capacidad de ordenación en la tercera columna, por último, indicamos que el idioma sea en castellano.

Copiar

Código completo

El código del template al completo es el siguiente.

Copiar

Los datos aparecen ordenados por la primera columna y se restringe la opción de ordenación en la tercera columna.

Además, se carga el idioma castellano para que el DataTable aparezca traducido y se le pasa como true el valor para hacerlo responsive.

Resultado final

El resultado final de este experimento lo tienes disponible en este enlace.

¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!
(Votos: 1 Promedio: 5)