In wordpress you need to use ajax in a specific way to follow the standard
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)
create a function in your functions.php file to handle the data retrieval and/or display of the table and add a hook to wp_ajax_
(fires only for logged in users) and wp_ajax_nopriv_
(fires for guests as well)
add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );
function prefix_ajax_add_foobar() {
// Handle request then generate response using WP_Ajax_Response
//generate table data and build table html here
// Don't forget to stop execution afterward.
wp_die();
}
once added to the functions.php page you can then include the JS in your script page or in a seperate file
jQuery.post(
ajaxurl,
{
'action': 'add_foobar',
'data': 'foobarid'
},
function(response){
alert('The server responded: ' + response);
}
);
So the ajaxurl action refers to your action registered in wordpress after wp_ajax_
or wp_ajax_nopriv_
. If you register it like this wp_ajax_nopriv_fill_my_table
your ajaxurl action will be fill_my_table
I would also suggest here to make the ajax call in a JS function so that you can call the same function at (document).ready()
Here is another post where it is well answered and relates to your question
:
Jquery ajax to custom php file: returning blank data