加载数据表。 AJAX 请求成功，但没有数据可见答案

【问题标题】：Load dataTable. Successful AJAX request, but no data visible加载数据表。 AJAX 请求成功，但没有数据可见
【发布时间】：2016-06-17 12:56:06
【问题描述】：

如何在数据表中加载带有服务器端处理的 json 数据？

我正在尝试构建一个自定义 Wordpress 插件并在数据表中显示来自 wpdb 的结果。我收到了成功 AJAX 返回调用，但 dataTable 仅显示“正在处理...”阶段，并且表格未填充行（保持为空）。

虽然我在这里阅读了许多（！）类似的问题和答案，但非常感谢使用 ajax 和 json_encode 加载数据的任何帮助。当前代码：

dahsboard.php

<table id="table-id" cellpadding="1" cellspacing="1" width="100%">
    <thead><tr>
        <th>h_id</th>
        <th>h_subject</th>
    </tr></thead>

ajax-grid-data.php

add_action('wp_ajax_my_action', 'my_action_callback');
function my_action_callback(){
    global $wpdb;

    $query = "SELECT h_id, h_subject FROM wp_tablename ORDER BY h_id limit 3";
    $myrows = $wpdb->get_results($query);
        foreach ($myrows as $value) {
            $ResultData['h_id'] = $value->h_id;
            $ResultData['h_subject'] = $value->h_subject;
            $data[] = $ResultData;
        }

    $json_data = array(
            "draw"            => 1, 
            "recordsTotal"    => 3,
            "recordsFiltered" => 3, 
            "data"            => $data,
    );

    echo json_encode($json_data);
    die();
}

我认为问题出在下面的数据类型格式上：

dashbboard.js

var oTable;
jQuery(document).ready(function() {
    jQuery.fn.dataTable.ext.errMode = 'throw';
    oTable = jQuery('#table-id').DataTable( {
        "serverSide": true,
        "processing": true,
        "columnDefs": [{"defaultContent": "-","targets": "_all"}],
        "columns": [
            { "data": "h_id" } ,
            { "data": "h_subject" }
        ],  

        "ajax":{
            url: "admin-ajax.php?action=my_action",
            type: "post",
            dataSrc:'',
            dataType : "json",
            contentType: "application/json; charset=utf-8",

                //dataSrc: function(data){ return data.data; },
                //async : false,
                //processData: true,
                //accepts: {json: "application/json, text/javascript"},

            success: function(data){
                console.log(JSON.stringify(data)); // successful echo data objects are shown in dashboard.
            },
            error: function(){  
                jQuery("#tablename").append('<tbody class="grid-error"><tr><th colspan="2">No results.</th></tr></tbody>');
                jQuery("#tablename_processing").css("display","none");
            }
        },

    });
});

当前结果

结果 php 文件测试：.../wp-admin/admin-ajax.php?action=my_action

{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"h_id":"37168","h_subject":"6216"},{"h_id":"37169","h_subject":"7021"},{"h_id":"37170","h_subject":"8923"}]}

结果ajax成功函数，控制台数据：

{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"h_id":"37168","h_subject":"6216"},{"h_id":"37169","h_subject":"7021"},{"h_id":"37170","h_subject":"8923"}]}

结果仪表板表仅显示：processing...

【问题讨论】：

在 ajax-grid-data.php 中更改 $json_data 将 "draw" => 1 更改为 "draw" => $_GET['draw']
console.log 显示 $_GET['draw'] 返回 null。
使用 intval($_GET['draw'])，给我 "draw":0,
删除success 选项并将dataSrc 从空字符串更改为function(data){return data;}，如本例中的datatables.net/reference/option/ajax
@bassxzero 已关闭，您不应更改 dataSrc 属性，应将其完全删除。

标签： php jquery json ajax datatable

【解决方案1】：

删除dataSrc 和success function 确实很神奇，并用数据填充了数据表。我非常感谢 @bassxzero 和 @davidkonrad 的帮助和努力。

确保有答案，“代表”新版dashboard.js：

var oTable;
jQuery(document).ready(function() {
jQuery.fn.dataTable.ext.errMode = 'throw';
oTable = jQuery('#table-id').DataTable( {
    "serverSide": true,
    "processing": true,
    "columnDefs": [{"defaultContent": "-","targets": "_all"}],
    "columns": [
        { "data": "h_id" } ,
        { "data": "h_subject" }
    ],  

    "ajax":{
        url: "admin-ajax.php?action=my_action",
        type: "post",
        dataType : "json",
        contentType: "application/json; charset=utf-8",
        error: function(){  
            jQuery("#tablename").append('<tbody class="grid-error"><tr><th colspan="2">No results.</th></tr></tbody>');
            jQuery("#tablename_processing").css("display","none");
        }
    },

});

});

【讨论】：