Hi,

Is it possible to return a wpdatatable by ajax? So far I can't get t to work.

It seems to bring back the contents as I can inspect it in the html, but the table_id is set to "display:none" and if I remove "display:none" it will display but it doesn't have the formatting or functionality, it's just a plain table.

See my code below

// my ajax function
add_action('wp_ajax_my_wpdatatable_shortcode', 'my_wpdatatable_shortcode'); // add action for logged users
add_action( 'wp_ajax_nopriv_my_wpdatatable_shortcode', 'my_wpdatatable_shortcode' ); // add action for unlogged users

function my_wpdatatable_shortcode() {
    $result = do_shortcode( '[wpdatatable id=11]' );
    echo $result;
    wp_die();
}

// my wordpress template and javascript
<?php /** * The template used for displaying page content in page.php * * @package Theme Meme */ ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?>>
    <div style="text-align: center;margin-top: 80px" class="tpn_search_results_gif hide">
        <img style="text-align: center" src="<?php echo home_url( '/' ).'wp-content/plugins/wp-tb-post-add/src/templates/images/loader_x.gif'; ?>" />
        <p>Loading..please wait</p>
    </div>
    <div class="clearfix entry-content" style="">
    </div>
</article>
<script>
    var tpn_security = "<?php echo wp_create_nonce("tpn_lists_nonce") ?>";
    jQuery(document).ready(function($){

        function tko_tpn_get_page_contents(search_list,elem,is_first_load){
            var search_list = search_list;
            var is_first_load = is_first_load;
            var gif_result = '#tpn_search_results_gif';
            var data = {
                action: "my_wpdatatable_shortcode",
                security: tpn_security
            };
            jQuery.ajax({url: ajaxurl,
                type: "POST",
                data: data,
                beforeSend: function(msg){
                    jQuery(".entry-content").addClass('hide');
                    jQuery(gif_result).removeClass('hide');
                    jQuery('.tpn_search_results_gif').removeClass('hide');
                    jQuery(".entry-content").html("");
                },
                success: function(msg){
                    //alert(msg);
                    console.log(msg);
                    jQuery(gif_result).addClass('hide');
                    jQuery('.tpn_search_results_gif').addClass('hide');
                    jQuery(".entry-content").html(msg);
                    jQuery(".entry-content").removeClass('hide');
                } ,
                error:  function(msg) {
                    console.log(msg);
                    jQuery('.tpn_search_results_gif').addClass('hide');
                    jQuery(gif_result).addClass('hide');
                    jQuery(".entry-content").html('<br><br><br><br><p style="text-align: center">Nothing found that matched your criteria</p>');
                    jQuery(".entry-content").removeClass('hide');
                    return false;
                }
            });
        }

        $('#tpn_toolbar_btns .btn-primary').click(function(){
            //var goto = window.location.origin+'/'+$(this).data('url')+'/';
            //location.href = goto;
            tko_tpn_get_page_contents($(this).data('url'),this,true);
        });

    });
</script>

Thanks

Hi Milos,

That's a shame becuase the tables are taking a long time to load and the ajax solution at least allows me to pop up a loading gif while the content is being prepared.

Basically all I want to do is to display a loading gif while the page and the table is loading. Are there any filters that could help me do this without using ajax?

Finally, could you provide me with a quote to customise this ajax functionality?

Thanks