Question

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

我正在尝试构建自定义Wordpress插件，并在dataTable中显示来自wpdb的结果。我得到了一个成功的 AJAX回复调用，但是dataTable只显示了一个＆＃34; Processing ...＆＃34;阶段和表不填充行（保持为空）。

虽然我在这里阅读了很多（！）类似的问题和答案，但是非常感谢使用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的网格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...

Answer 1

删除dataSrc和success function确实奇迹并用数据填满了dataTable。我非常感谢 @bassxzero 和 @davidkonrad 的帮助和努力。

确保答案，＆＃34;代表＆＃34;新版本的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");
        }
    },

});

}）;

加载dataTable。成功的AJAX请求，但没有数据可见

1 个答案: