Front-end (JS) part of wpDataTables plays a significant role in the plugin functionality. Mostly the front-end rendering is done by DataTables jQuery plugin, but wpDataTables introduces some callbacks of its own.

All wpDataTables existing on the page are reflected in the global JavaScript object called ‘wpDataTables‘. If you check this variable in the JS developer console you will see the wpDataTables as properties of this object:

wpDataTables front-end callbacks

We introduced a simple method that allows adding events that would be triggered on each table redraw (redraw happens when you sort the table, search, switch pages, or use the filter). This method is called:

addOnDrawCallback( function callback() );

Let’s see an example.

Here’s a wpDataTable:

Build tables like this within minutes



If we check the developer console, we can see that this wpDataTable can be accessed via a global variable:

wpDataTables.table_1

To assign a simple function to the redraw event we can use e.g. this jQuery snippet:

<script type="text/javascript">
jQuery(window).load(function(){
  wpDataTables.table_1.addOnDrawCallback(
  function(){
    jQuery('#callback_msg_container').append('Callback triggered!');
   })
});
</script>

The snippet is live on this page – so just try to sort, filter, or switch pages in the table to see how it works!

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.