Front-end callbacks

wpDataTable Front-end callbacksJavaScript hooks for customizing the table layout

The front-end (JS) part of wpDataTables plays a significant role in the plugin’s functionality. Generally, front-end rendering is done by the 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:

Please note that using wpDataTable callbacks requires certain level of programming skills and included support refers only to advice.

addOnDrawCallback( function callback() );

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 – try to sort, filter, or switch pages in the table to see how it works!

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

wpDataTables.table_1

Here’s a wpDataTable:

 

Last chance! Black Friday Sale on all plans (Yes, lifetime plans as well)! 30% off with the code WPDTBLACK2019 - Act fast, only a few hours left!!!!
toggle

Do you have the best

essential plugins installed?

Grab the best 46 plugins. Tested and sorted.

Plugins for SEO, Caching, Security, Design and UX, Stats & analytics, Social sharing. Only the best ones.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).

Thank you for subscribing! Please check your inbox to download the WordPress goodies.