Ajax使用jQuery DataTables获取数据

时间:2017-03-12 03:18:58

标签: php json ajax mongodb datatables

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

但是,我收到了如下所示的弹出消息:

  

请求row0,第0列的未知参数'0'。更多   有关此错误的信息,请参阅http://datatables.net/tn/4

以下部分代码以MongoDb程序方式从job id中选择titlesubmittedstatusjobs collection列:

submit.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>

感谢您的帮助。

1 个答案:

答案 0 :(得分: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>

更正此代码段:

$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);