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

Question

我正在使用 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");
    }

Answer 1

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

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

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

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

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

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

How to show wpDataTables results inside popup using AJAX

ajax

wordpress

datatable

popup

datatables