如何根据ajax的值对表<td>进行样式化

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>上数据相同的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

将以下函数添加到$(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);