如何样式化表格 <td> 基于其来自带有数据表的ajax的值

Question

I have a page showing datatables using php. As the data is increasing day by day, I have considered datatable ajax function to get it processed server side to reduce time taken to load all the data at once.

But the problem is I can't figure out how to style based on its values. For example:

What I'm using with 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>

How to achieve the same <label> style on <td> with data from datatables 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

Add following function to $(document).ready(function() { . I have kept 3 seconds delay to take care of ajax. You can adjust the same.

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