How to show wpDataTables results inside popup using AJAX

Question

I am using wpdatatables to display data.

I have added MySQL Query in backend, and that query has 2 dynamic parameter like

SELECT some fields 
FROM tbl1 tb1 
JOIN tbl2 tb2 
    ON some conditions 
JOIN tbl3 tb3 
    ON some conditions
WHERE DATE(Date) BETWEEN '%VAR1%' AND '%VAR2%';

wpdatatables Generate shortcode like [wpdatatable id=some_id] ,

I have create 2 date-picker for Start Date and End Date on Frontend.

Now I have to pass dynamic parameter like [wpdatatable id=some_id var1="strt_dt" var2="end_dt"]

So to get strt_dt and end_dt, I have call AJAX and pass parameters.

My problem is I am showing all this data inside popup.

I mean when user clicks on See Report Button one popup will be open. Data also Displayed correctly. But it showing without wpdatatables Layout. It is not Considering wpdatatables JS or CSS

Here is my AJAX Callback Function :

 public function get_datatable_data() {
    echo do_shortcode('[wpdatatable id=some_id var1="'.$_POST['strt_dt'].'" var2="'.$_POST['end_dt'].'"]');
    wp_die();
}

Here is Code in which I am appending data :

var params =  {"strt_dt":strt_dt,"end_dt":end_dt,action:"get_datatable_data"}
jQuery.post(ajaxurl,params,function(data){
    if(data){
        jQuery(".some class").empty().append(data);
    }else{
        jQuery(".some class").empty().append("No data Found");
    }

How are you creating the pop-up? Is the pop-up part of an embedded document, such as an iframe? If so, then your standard css and js will not be directly usable by elements in the embedded document. In case it is relevant, see [this](https://stackoverflow.com/questions/19858217/how-to-apply-css-to-inner-iframe-element-through-parent-window-css-class). — andrewJames, Mar 23 '20 at 12:54
I don't think it has an issue with popup, I think the issue is with AJAX response ... I have print the whole table as an AJAX response here `if(data){ jQuery(".some class").empty().append(data); }` , I still could not find solution for it — Parthavi Patel, Mar 24 '20 at 05:04

score 1 · Accepted Answer · answered Jun 02 '20 at 10:12

This would have been possible if you are using normal datatable where you can re-initalize datatable on ajax success by using following code.

$("#div").dataTable().fnDestroy()
$("#div").dataTable();

But if you are using Plugin then there is no direct way to achive this, one possible solution is to create a normal page with datatable shortcode in it and then in you ajax callback you call that page in iframe. for eg: you create page www.mysite.com/datatable - this page will have the actual shortcode

public function get_datatable_data() { ?>
   <iframe src="www.mysite.com/datatable" height="200px"></iframe>
<?php
    wp_die();
}

this will allow datatable to get initalize in iframe.

How to show wpDataTables results inside popup using AJAX

1 Answers1