如何設置表格​​基於它的價值從ajax與數據表

Question

我有一個頁面顯示數據表使用php。隨着數據日益增加，我已考慮使用可數據表達的ajax函數來處理服務器端，以減少一次加載所有數據所需的時間。

但問題是我無法弄清楚如何根據其值的風格。例如：

什麼我使用的是PHP：

<table> 
<thead> 
    <tr> 
    <th>Date</th> 
    <th>Amt</th> 
    <th>Status</th> 
    </tr> 
</thead> 
<tbody> 

<?php while ($data = $sql->fetch(PDO::FETCH_OBJ)) { 
    echo " 


<tr> 
     <td>".$data->date."</td> 
     <td>".$data->amt."</td>"; 

     // Please note this step... 
     if ($data->status == "Paid") { 
     echo ' 
     <td> 
      <label class="label label-succcess">'.$data->status.'</label> 
     </td>'; 
     } 
     elseif ($data->status == "Unpaid"){ 
     echo ' 
     <td> 
     <label class="label label-danger">'.$data->status.'</label> 
     </td>'; 
     } 
     elseif ($data->status == "Pending"){ 
     echo ' 
     <td> 
     <label class="label label-warning">'.$data->status.'</label> 
     </td>'; 
     } 
echo '</tr>'; 
} 
</tbody> 
</table> 

如何實現相同的<label>風格上<td>的數據與來自 數據表AJAX：

<table id="datatable-buttons" class="table table-striped table-bordered"> 
    <thead 
     <tr> 
     <th>Date</th> 
     <th>Amt</th> 
     <th>Status</th> 
     </tr> 
    </thead> 
</table> 




$(document).ready(function() { 
    //$('#datatable-buttons').DataTable({ 
    var table = $('#datatable-ajax').DataTable({ 
    "ajax": { 
     "url": "scripts/json.php", 
     "dataSrc": "" 
    }, 
    "columns": [ 
     { "data": "date" }, 
     { "data": "amt" }, 
     { "data": "status" }, 
    ] 
}); 

Answer 1

將以下函數添加到$（docu （函數（）{。我一直保持3秒的時間來照顧ajax。你可以調整它。

  setTimeout(
      function() 
      { 
       //do something special 
       $('table>tbody>tr>td:nth-child(3)').each(function() { 
       //alert($(this).text()); 
       if($(this).text() === "Paid"){ 
        $(this).addClass('label label-succcess'); 
       } 
       else if($(this).text() === "Unpaid") { 
        $(this).addClass('label label-danger'); 
       } 
       else if($(this).text() === "Pending") { 
        $(this).addClass('label label-warning'); 
       } 
       }); 
      }, 3000);