Как стилизовать таблицу <td> на основе ее значения из ajax с данными datatables

Question

У меня есть страница, показывающая данные с использованием php. Поскольку данные растут изо дня в день, я рассматривал функцию datatable 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> с данными из DataTables АЯКС:

<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

Добавить следующую функцию в $ (document) .ready (function() {. Я оставил 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);