使用 jQuery DataTables 获取 Ajax 数据

Question

我想使用 jQuery DataTables 插件将我的 MongoDb 集合之一显示到表中。

但是，我得到了如下所示的弹出消息：

为第 0 行第 0 列请求未知参数“0”。更多信息 有关此错误的信息，请参阅http://datatables.net/tn/4

以下部分代码以 MongoDb 程序方式从 jobs collection 中选择 job id、title、submitted 和 status 列：

提交.php

$filter = ['user_id' => $_SESSION['google_id']];
$query = new MongoDB\Driver\Query($filter);

try {

    $cursor = $manager->executeQuery($dbname.'.'.$collection, $query);
    $arr = array();     
    foreach($cursor as $c){         
        $temp = array("job_id" => $c->job_id, "title" => $c->title, "submitted" => $c->submitted, "status" => $c->status);
        array_push($arr, $temp);
    }
    echo json_encode($arr);

} catch (MongoDB\Driver\Exception\Exception $e) {
    echo $e->getMessage(), "\n";
}

并在 HTML 页面中显示：

jobs.php

<table id="tableJobs"></table>
<script>
$(document).ready(function(){
    $.ajax({
      type: "POST",
      url: "submit.php",
      data: "",
      dataType: "json",
      success: function(resultData) {
          var opt={
            "bProcessing":true,
            "aoColumns":
            [
                {"sTitle":"Submission"},
                {"sTitle":"Title"},
                {"sTitle":"Submitted On"},
                {"sTitle":"Status"}
            ],
            "aaData": resultData
         };         
       $("#tableJobs").dataTable(opt);
       }
     });    
});
</script>

我错过了哪些步骤？如何让它在 HTML 表中显示来自 db 的所有 JSON 数据源，如下所示：

<tr>
<td>F37CE14A-506C-24E7-EBDC-362216BB9089</td>
<td>Demo</td>
<td>2017-03-01 06:47:03</td>
<td>Finished</td>
</tr>

提前感谢您的帮助。

Answer 1

这正是问题所在（至少数据表文档所说的）。在您的行中的某处，您似乎有空值或空值。尝试将它们初始化为空字符串。

$job_id = !empty($c->job_id) ? $c->job_id : '';
$title = !empty($c->title) ? $c->title : '';
$submitted = !empty($c->submitted) ? $c->submitted : '';
$status = !empty($c->status) ? $c->status : '';

$temp = array("job_id" => $job_id, "title" => $title, "submitted" => $submitted, "status" => $status);

您还需要告诉浏览器期待什么，即 JSON。所以在输出你的数据之前添加一个头部函数：

header('Content-Type: application/json'); // add this line here
echo json_encode($arr);

更新

因此，查看数据表的文档，您需要使用“aoColumns”对象上的属性“mDataProp”设置列标识符。然后将这些声明的键设置为结果中的数组键。请参阅下面的小提琴：

$(document).ready(function(){

    var resultData = [
    {"Submission":"BB520E08-A183-CBEB-BAE2-006056169116","Title":"LA001","Submitted On":"2017-03-12 11:27:41","Status":"Running"},
    ];
    var opt={
            "bProcessing":true,
            "aoColumns":
            [
                {"mDataProp":"Submission"},
                {"mDataProp":"Title"},
                {"mDataProp":"Submitted On"},
                {"mDataProp":"Status"}
            ],
            "aaData": resultData
         };         
    $("#tableJobs").dataTable(opt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<table id="tableJobs"></table>

更正这个sn-p：

$temp = array("job_id" => $job_id, "title" => $title, "submitted" => $submitted, "status" => $status);

到这个：

$temp = array("Submission" => $job_id, "Title" => $title, "Submitted On" => $submitted, "Status" => $status);

在回显任何内容之前，您仍然需要此行：

header('Content-Type: application/json'); // add this line here
echo json_encode($arr);