Índice de contenidos
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.

Esto se realiza en el WordPress, dentro del fichero funcions.php de tu tema (mejor si es un tema hijo) de la siguiente manera:
En cuanto al javascript, las dependencias a cargar son dos:

Y de nuevo en el functions.php del tema se debe insertar el siguiente código.
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, en esta otra entrada 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.
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.
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.
Código completo
El código del template al completo es el siguiente.
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.
Deja tu comentario