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 Triggers
- Setting Up External JavaScript File
- Executing JavaScript on Table Load
- Handling Paging and Filtering Events
- Generic Trigger for Any Table
- Conclusion
Understanding Table 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 organised, create an external file and enqueue into your WordPress theme. This file will store all your custom code related to the 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 Ninja 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!
Ninja Table FAQs
How to Use Ninja Tables with Javascript Load Events
Ninja Tables provides a flexible and powerful framework for creating dynamic tables within your WordPress website. One of the key aspects of working with Ninja Tables is understanding how to utilize Javascript load events to enhance table functionality and user experience.
How can I use Javascript load events to customise Ninja Tables?
There are several methods to implement Javascript load events with Ninja Tables:
jQuery's .ready() function: This is a common approach for triggering scripts once the DOM (Document Object Model) is ready. You can use it to initialize Ninja Tables and apply custom styling or behavior.
Custom Javascript events: You can create custom events within your Table code and trigger them when specific conditions are met. This allows for more granular control over table behavior.
Table built-in hooks: Ninja Tables provides various hooks that you can use to execute custom Javascript code at different stages of the table's lifecycle. These hooks can be triggered using the ninja_tables_action or ninja_tables_filter functions.
What are Javascript load events and how do they relate to Ninja Tables?
Javascript load events are triggers that occur when specific elements or the entire webpage have finished loading. In the context of Ninja Tables, these events can be used to execute custom scripts or functions once the table has been fully rendered, ensuring that your table functionality is applied at the appropriate time.
What are some common use cases for Javascript load events?
Javascript load events can be used to enhance the functionality and user experience in various ways. For example, you could apply custom styles or formatting to the table based on user input or other factors. This could include highlighting rows based on specific criteria or changing the table's appearance depending on the screen size.
Another common use case is to implement custom filtering or sorting functionality that updates the table in real-time without requiring page refreshes. This provides a more interactive and responsive user experience. Additionally, you can use Javascript load events to trigger AJAX requests to fetch or update table data dynamically. This allows you to load data from external sources or update the table based on user actions or time-based intervals.
To enhance the visual appeal of your table, you can add smooth animations or transitions using Javascript load events. For example, you could fade in new rows or columns when they are added, or animate the table's appearance when it is filtered or sorted.
Javascript load events can also be used to integrate Ninja Tables with other plugins or scripts. This enables you to extend the table's functionality or integrate it with other components of your website.
Overall, Javascript load events can help create a more interactive and engaging user experience by providing dynamic and responsive table behavior.
How does Ninja Tables integrate with WordPress development?
Ninja Tables is designed to seamlessly integrate with WordPress websites, providing a user-friendly and customizable table creation experience. It leverages WordPress's core functionalities and APIs to offer a smooth integration with your website's development. One of the key ways Ninja Tables integrates with WordPress is through shortcodes. Shortcodes are simple tags that you can use to embed tables into your content without needing to write complex code. This makes it easy to add tables to pages, posts, or custom post types. Additionally, support for custom post types and custom fields, allowing you to create and manage your table data within the WordPress admin interface. This provides a structured and organised approach to content management.
