如何使用 AJAX 在弹出窗口中显示 wpDataTables 结果答案

【问题标题】：How to show wpDataTables results inside popup using AJAX如何使用 AJAX 在弹出窗口中显示 wpDataTables 结果
【发布时间】：2020-07-03 16:29:56
【问题描述】：

我正在使用 wpdatatables 来显示数据。

我在后端添加了 MySQL 查询， 并且该查询有 2 个动态参数，例如

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 生成类似 [wpdatatable id=some_id] 的简码，

我为前端的开始日期和结束日期创建了 2 个日期选择器。

现在我必须传递动态参数，例如[wpdatatable id=some_id var1="strt_dt" var2="end_dt"]

所以要获得strt_dt 和end_dt，我调用了AJAX 并传递参数。

我的问题是我在弹出窗口中显示所有这些数据。

我的意思是当用户点击查看报告按钮时将打开一个弹出窗口。数据也正确显示。但它显示没有 wpdatatables 布局。它没有考虑 wpdatatables JS 或 CSS

这是我的 AJAX 回调函数：

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

这是我在其中附加数据的代码：

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");
    }

【问题讨论】：

您是如何创建弹出窗口的？是嵌入式文档（例如 iframe）的弹出部分吗？如果是这样，那么嵌入文档中的元素将无法直接使用您的标准 css 和 js。如果相关，请参阅this。
我使用普通的 JS 和 CSS 创建了弹出窗口
你能把它添加到问题中吗？
我认为弹出窗口没有问题，我认为问题出在 AJAX 响应上……我已将整个表格打印为 AJAX 响应 if(data){ jQuery(".some class").empty().append(data); } ，我仍然无法为它找到解决方案

标签： ajax wordpress datatable datatables popup

【解决方案1】：

如果您使用的是普通数据表，您可以使用以下代码在 ajax 成功时重新初始化数据表。

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

但是，如果您使用的是插件，则没有直接的方法来实现这一点，一种可能的解决方案是创建一个包含数据表短代码的普通页面，然后在 ajax 回调中调用 iframe 中的该页面。例如：您创建页面 www.mysite.com/datatable - 此页面将包含实际的短代码

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

这将允许数据表在 iframe 中初始化。

【讨论】：