如何在表列表視圖中回顯json數據

Question

我有一個函數，我從ajax.i調用從函數獲取json格式的數據。 我想顯示所有的數據在表列表視圖中一個接一個..我的功能正常工作，並獲取數據...但我不明白如何在表列表視圖中回顯數據。 請幫我在我的表中迴應這個。

下面的數據是我從ajax調用得到的響應數據。

{"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]} 

我cakephp的功能。

public function fetchDriverlist() 
{ 
    $this->autoRender = false;   
    $this->loadModel('DispatchedJob'); 
    $driverlist = array(); 
    if (isset($this->request['data']['id'])) { 
     $driverlist = $this->DispatchedJob->find('all', array(
     'recursive' => -1, 
     'conditions' => array('DispatchedJob.driver_id' => $this->request['data']['id']), 
     'fields' => array('drivers.name','drivers.mobile','DispatchedJob.startdate','DispatchedJob.created','job.shipment_title'), 
     'joins' => array(
       array(
        'table' => 'drivers', 
        'alias' => 'drivers', 
        'type' => 'LEFT',     
        'conditions'=> array('DispatchedJob.driver_id = drivers.id') 
       ), 
       array(
        'table' => 'jobs', 
        'alias' => 'job', 
        'type' => 'LEFT',     
        'conditions'=> array('DispatchedJob.job_id = job.id') 
       )   
      ), 
      'order' => array('DispatchedJob.id'=>'DESC') 
     )); 
    } 
    header('Content-Type: application/json');   
    return json_encode(array('count' => $driverlist));  
    exit(); 
} 

我的AJAX腳本

<script> 
$(document).ready(function() { 
    $("#driver").on('change', function() { 
     var id = $(this).val(); 
     if (id) { 
     var dataString = 'id=' + id; 
     var values = $(this).serialize(); 
     ajaxRequest= $.ajax({ 
      url: '<?php echo Router::url(array("controller" => "Drivers", "action" => "fetchDriverlist")); ?>', 
      type: 'post', 
      data: dataString, 
      success: function(response, data) { 
      if(data == "success") {   
       var return_data = $.parseJSON(response); 
       $("#datatable").html(return_data['count']); 
      } 
      }, 
     }); 
    } 
    }); 
}); 
</script> 

我想在下面的表

<table class="table table-striped"> 
         <tbody> 
         <tr>      
         <th>name</th> 
         <th>mobile</th> 
         <th>startdate</th> 
         <th>shipment title</th> 
         </tr> 

         <tr>      
         <th>Lucky</th> 
         <th>9960181380</th> 
         <th>2016-05-11</th> 
         <th>Ship goods</th> 
         </tr> 
         <tr>      
         <th>Lucky</th> 
         <th>9960181380</th> 
         <th>2016-05-01</th> 
         <th>Ship goods</th> 
         </tr> 
         </tbody></table> 

Answer 1

顯示數據試試這個代碼：

header('Content-Type: application/json'); 
    $json= json_encode($Data, JSON_PRETTY_PRINT); 
    print_r($json); 

Answer 2

HTML：

<table> 
<tboday id='print'> 
</tbody> 
</table> 

JavaScript來在表格中顯示的數據

var tr; 
for(var i=0;i<html.length;i++){ 
tr=tr+"<tr><td>youe_value</td><td>Your_value</td></tr>"; 
} 
$('#print').html(tr); 

輸出

<table> 
<thead> 
<tr>      
<th>Job Title</th> 
<th>Vehicle Type</th> 
</tr> 
</thead> 
<tbody> 
<tr>      
<td>Your value</td> 
<td>Your value</td> 
</tr> 
</tbody> 
</table> 

Answer 3

這裏是你的答案：

$(document).ready(function() { 
 

 
var return_data = {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]}; 
 

 
var tbody_content = ""; 
 

 
$.each(return_data.count, function (index, item) { 
 
    tbody_content += 
 
    "<tr>" + 
 
     "<td>" + item.drivers.name + "</td>" + 
 
     "<td>" + item.drivers.mobile + "</td>" + 
 
     "<td>" + item.DispatchedJob.startdate + "</td>" + 
 
     "<td>" + item.job.shipment_title + "</td>" + 
 
    "</tr>"; 
 
}); 
 

 
$('.table').find('tbody').html(tbody_content); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr>      
 
     <th>name</th> 
 
     <th>mobile</th> 
 
     <th>startdate</th> 
 
     <th>shipment title</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

Answer 4

HTML：

JS在阿賈克斯成功回調：

// Data from your ajax call 
var data = {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]}; 

var trs = []; 
for(var i in data.count){ 
    trs.push("<tr><td>" + data.count[i].drivers.name + 
    "</td><td>" + data.count[i].drivers.mobile + "</td>" + 
    "<td>" + data.count[i].DispatchedJob.startdate + "</td>" + 
    "<td>" + data.count[i].job.shipment_title + "</td>"); 
} 
$('table tbody').html(trs.join('')); 

不要在循環cancat字符串，它總是分配內存，這樣你就可以很容易得到內存溢出異常。

demo fiddle