Hi there,

is there a Javascript or jQuery code which i can use to trigger a table refresh?

I havent found anything in the documentation.

This would be really helpful.

Regards,

Michael

Hi,

there is a JS function for it.

I checked datatables docs:

var table = jQuery('#table_1').DataTable();
table.ajax.reload();

Regards,

Michael

I'm trying to find a way to make the table refresh after saving an edited row or after adding a new row. I see your code below, but how would I implement this to make it work for what I need? 

We have a lot of columns so the timed refresh isn't a good option. Our users will be right in the middle of a huge edit and it refreshes and loses their data. But if I leave it off, they can't see any changes or additions they've made until they do a browser refresh. 

Thank you!

First off thank you michiiee for that jquery. I was looking for a script to refresh all the tables on the page once one table is edited, as my page basically moves an item from one to another and you couldnt see it on the other page until a page refresh was done. I modified michiiee's response by targeting all attributes of the tables. The below jquery will refresh all tables on the page. Now my question is how do I get this to execute after an edit, i've tried to implement it with after_editor_dialog and after _frontent_edit_row but they don't seem to work. Really hoping you can just tell me which action would be best for this, or maybe its a frontend table callback? 

 
$('table[id^=table_]').each(function () {
var table = $(this).DataTable();
table.ajax.reload();
});

Thank you!

Ok, I figured out a solution to make this work using the action wpdatatables_after_editor_dialog.

I have the action add the jquery script using the action above, then I set an on click targeting the "ok_edit_dialog". After a front-end edit using the editor dialog then it starts the script, but I set a timeout of 3secs to wait for the data to be saved back to the database. Then it reloads all the tables. It works great for what I was needing. I'm not a developer by any means so I'm sure there are some better ways to do this, but it works. 

If your wanting to target other buttons to run the script just add to the click event. The attribute selector i'm using is any button that the id ends in "ok_edit_dialog". If you wanted to have it execute  on the apply or another button just add to it like so = jQuery('button[id$=ok_edit_dialog] button[id$=apply_edit_dialog]').

Here is my action and script:

function after_edit_reload_all_tables ( $tableId ){
               echo "<script type='text/javascript'>
                               jQuery(document).ready(function(){
                                    jQuery('button[id$=ok_edit_dialog]').click(function() {
                                        setTimeout(function(){
                                             jQuery('table[id^=table_]').each(function () {
                                                  var table = jQuery(this).DataTable();
                                                  table.ajax.reload();
                                              });
                                           }, 3000);
                                      });
                                  });
                            </script>";
}
add_action( 'wpdatatables_after_editor_dialog', 'after_edit_reload_all_tables' );