如何根据ajax与datatables的值来设置表的样式

时间:2016-06-14 02:28:25

标签: php jquery ajax datatable

我有一个页面显示使用php的数据表。随着数据日益增加,我考虑使用datatable ajax函数来处理服务器端,以减少一次加载所有数据所需的时间。

但问题是我无法根据其价值找出如何设计风格。例如:

  

我在PHP中使用的内容:

scrolled = "no"
$(window).scroll(function(){
scr = $("body").scrollTop();
if (scr > 100 && scrolled == "no"){
$("#menu").css({"display:block"})
displayed = "yes"
}
if (displayed == "yes" && scrolled = "yes"){
$("#menu").css({"display:none"})
}
});
  

如何在<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>样式   datatables ajax:

<td>

1 个答案:

答案 0 :(得分:0)

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