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' );