Ninja Tables: Working With Javascript Load, Paging & Filtering Events
Ninja Tables: Working With Javascript Load, Paging & Filtering Events
Ninja Tables is a powerful WordPress plugin that allows you to create and manage tables effortlessly. While the plugin provides built-in options to inject custom JavaScript into your tables, managing these scripts across multiple tables can become frustrating.
Furthermore, we don’t want to have to redeclare common functionality across these custom Javascript fields; ideally we’d declare them once in an external JS file and attach the function to the relevant table events.
But, how do we do this? Ninja Tables doesn’t seem to have any documentation on this, but with the requirement for this functionality in a recent project, I thought we’d best take a look.
Given the plugin has custom Javascript fields for each table, there must be a Javascript trigger against each table triggering this code to execute, so I went out to find it!
In this guide, we'll explore how to write JavaScript code that executes when tables are loaded, paged, or filtered, all within an external file.
Introduction
Ninja Tables offer dynamic triggers that developers can leverage to execute custom JavaScript code at specific events. In this tutorial, we'll focus on hooks related to table loading, paging, and filtering, allowing you to enhance the functionality of your tables without relying on the built-in custom JavaScript boxes in the admin.
Table of Contents
- Understanding Ninja Tables Triggers
- Setting Up External JavaScript File
- Executing JavaScript on Table Load
- Handling Paging and Filtering Events
- Generic Trigger for Any Table
- Conclusion
Understanding Ninja Tables Triggers
Take the code below:
function format_emails() {
jQuery('.table tbody td').each(function () {
var text = jQuery(this).html().replace('@', '@<wbr/>');
jQuery(this).html(text);
});
}
jQuery(document).on('ninja_table_ready_init', function (event, data) {
format_emails();
});
In this example we want to format the table data to but a word break after @ symbols within email addresses to allow them to break onto two lines, so a string replace for ‘@’ to ‘@<wbr/>’.
Ninja Tables provides a set of triggers that fire at different stages of table rendering. In our example above, the ninja_table_ready_init trigger fires when any Ninja Table has completed rendering – it is a non-table-specific / global trigger.
Setting Up External JavaScript File
To keep your JavaScript organized, create an external file and enqueue into your WordPress theme. This file will store all your custom code related to Ninja Tables.
Executing JavaScript on Table Load
Utilise the ninja_table_ready_init trigger to execute code when any table is loaded. In the provided example, the JavaScript function format_emails performs the string replace for us on any Ninja Table instance.
Handling Paging and Filtering Events
Ninja tables fires the after.ft.paging and after.ft.filtering events when tables are paged (another page of the table is navigated to) or filtered. You need to also consider these events when adding your custom Javascript. If we only consider the ‘init’ hook, the Javascript will run the first time the table is loaded, but wont then run again on page 2, or when a filter is applied.
So, we also need to attach our function to the paging/filtering events like so:
jQuery('.foo-table).on('after.ft.paging', function () {format_emails();
});
jQuery('.foo-table').on('after.ft.filtering', function () {
format_emails();
});
(Please note this case doesn’t cover multiple tables on one page, in which case you’d need to loop through each table and attach to each).
So, now we can run our custom Javascript when a Ninja Table is loaded, or when new rows are brought in via paging or filtering – great!
But what if we only want to target a specific table?...
Dynamic Triggers for Specific Tables
For specific tables, Ninja Tables creates dynamically generated triggers based on the ID of the specific table, like ninja_table_ready_init_table_id_4162 , where ‘4162’ is the ID of the table. This allows us to run custom code only for a particular table or tables.
I’ve provided an example of how this looks below. The approach is identical, but the ‘init’ hook also contains the table ID, and we’re targeting the specific table’s ‘filtering’ and ‘paging’ events by targeting the table with the table ID:
jQuery('#footable_parent_4162').on('after.ft.paging', function () {
format_emails();
});
jQuery('#footable_parent_4162').on('after.ft.filtering', function () {
format_emails();
});
jQuery(document).on(' ninja_table_ready_init_table_id_4162', function (event, data) {
format_emails();
});
Here we’re executing out format_emails() function when table 4162 is loaded, paged or filtered.
Conclusion
By writing JavaScript code that hooks into Ninja Tables triggers, you can enhance the functionality of your tables without relying on the built-in admin options.
The main advantage of doing it this way and leaving the ‘Custom JS’ boxes alone is that now we’re in a position to reuse our custom functionality across different tables which makes this a nice maintainable approach - keeping our code in one tidy place, and allows for more freedom in general.
So, enhance your Ninja Tables development experience by leveraging these hooks and executing custom scripts seamlessly!
