Wie man Tabelle basierend auf seinem Wert von ajax mit Datenträgern

Question

stylize ich habe eine Seite, die Datenables mit php zeigt. Da die Daten von Tag zu Tag anwachsen, habe ich eine datable Ajax-Funktion in Betracht gezogen, um sie serverseitig zu verarbeiten, um die Zeit zu verringern, die zum Laden aller Daten gleichzeitig benötigt wird.

Aber das Problem ist, ich kann nicht herausfinden, wie man basierend auf seinen Werten style. Zum Beispiel:

Was verwende mich mit 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> 

Wie dem gleichen <label> Stil auf <td> mit Daten aus Datentabellen erreichen 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

Fügen Sie folgende Funktion zu $ ​​hinzu (Doku) .ready (Funktion() {. Ich habe 3 Sekunden gewartet, um mich um Ajax zu kümmern. Sie können dasselbe einstellen.

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