jQuery DataTables in WordPress

JQuery DataTables provide an out of box solution for searchable tables. Directions to include DataTables in your project can be found here: https://www.datatables.net/. But if you need help with including DataTables on a WordPress instalation, keep reading.

Include CDN files.

These are the JavaScript and CSS files that you need to include in your project.

https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css

https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js

In order to include them in a WordPress project these flies need to be enqueued. Place this code in your functions.php file of you theme.

/* datatables css and js */
function datatables_assets() {
	wp_enqueue_style( 'datatable_style', 'https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css' );
	wp_enqueue_script( 'datatables', 'https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'datatables_assets' );

Create your table

In your theme folder, duplicate the file page.php. Rename your file with something meaningful to your project. I will call it mytable-page.php. Open your newly created file in a file editor (I use Visual Code). Add this code to the top of your file:

<?php

/**
 *  /*Template name: my table page
 *

Add your well formatted html table above the loop.

<table id="my-first-table" class="display" cellspacing="0" style="width:100%">
    <thead>
        <tr>
        <th>Page</th>
            <th>Date</th>
            <th>Medium</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>01/01/2020</td>
            <td>video</td>
        </tr>
        <tr>
            <td>2</td>
            <td>06/12/2020</td>
            <td>photo</td>
        </tr>
        <tr>
            <td>3</td>
            <td>07/03/2020</td>
            <td>newspaper</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Page</th>
            <th>Date</th>
            <th>Medium</th>
        </tr>
    </tfoot>
</table>

Call DataTable() function

In your theme create a folder named js, and add a JS file called custom.js. Call DataTable() function on your table using its id.

jQuery(document).ready(function ($) {

       $('#my-first-table').DataTable();
     
});

Enqueue the custom.js file

In the functions.php file modify datatables_assets() function to include the custom script. The function will look like this:

/* datatables css and js */
function datatables_assets() {
	wp_enqueue_style( 'datatable_style', 'https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css' );
	wp_enqueue_script( 'datatables', 'https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js', array( 'jquery' ) );
	wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'datatables_assets' );

Create a WP page that will display your table

In WordPress dashboard create a page, and set its template to “my table page”. Publish it! Done!

Notes

It’s a good idea to include the cdn files and the custom javascript only on the page/s that need this code. In order to do this use is_page() conditional tag to include the scripts only on the page that displays the table.

/* datatables css snd js   */
function datatables_assets() {
        // When Page 42 (ID) is being displayed.
	if(is_page( 42 ){
		wp_enqueue_style( 'datatable_style', 'https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css' );
		wp_enqueue_script( 'datatables', 'https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js', array( 'jquery' ) );
		wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
	}
}
add_action( 'wp_enqueue_scripts', 'datatables_assets' );

Leave a Comment