jQuery DataTablesを使用したAjaxソースデータ

Question

jQuery DataTablesプラグインを使用して、MongoDbのコレクションの1つをテーブルに表示したいとします。以下に示すように

しかし、私は、ポップアップメッセージが表示されました：

は未知パラメータを要求した「0」ROW0のために、列0をこのエラーの詳細 情報については、以下を参照してくださいhttp://datatables.net/tn/4

次の部分のコードは、MongoDBの手続きのように、jobs collectionからjob id、title、submittedとstatus列を選択：

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> 

私は逃したどのような手順？事前に助けを

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

感謝を：どのように私はそれがこのようなHTMLテーブルにデシベルからすべてのJSONデータソースを表示するために取得することができます。

Answer 1

これはまさに問題です（少なくとも、どのdatatablesドキュメントが言いますか）。あなたの行のどこかに、空の値やヌル値があるようです。初期化しようとすると空の文字列として初期化されます。

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

UPDATE

だから、DataTableののドキュメントを見て、あなたが「aoColumns」オブジェクトのプロパティ「mDataProp」を使用して、列の識別子を設定する必要があります。次に、宣言したキーを結果の配列キーとして設定します。あなたが何かをエコーする前にあなたはまだ、この行が必要になります

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

：

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

1本には、以下のフィドルを参照してください。 ：

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