Question

我正在使用带有PHP和MySQL的DataTables，效果很好，但我在设置行的类时遇到了很多麻烦。我的SQL表有一个名为“class_style”的列，其中包含一些值，如“blue_class”，“green_class”，“red_class”，...

我的目标是在结果的每一行上声明这个类名，这样我就可以（例如）显示带有红色背景的“red_class”行，类似于此示例http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html，其中显示为红色。< / p>

我认为可以使用的代码如下：

echo "<tbody>";
    for($i=0; $i < $number_of_results; $i++){
        echo "<tr class='" . mysql_result($result, $i, 'class_style') . "'>";;
            echo "<td>" . mysql_result($result, $i, 'family_name') . "</td>";
            echo "<td>" . mysql_result($result, $i, 'team') . "</td>";
        echo "</tr>";           
    };
echo "</tbody>";

当我用浏览器打开页面时，表格的每一行都显示为以下类：

<tr class='odd'>
<tr class='even'>

即使我使用的自动化程度较低的解决方案，如下所示

echo "<tbody>";
    for($i=0; $i < $number_of_results; $i++){
        echo "<tr class='my_class'>";;
            echo "<td>" . mysql_result($result, $i, 'family_name') . "</td>";
            echo "<td>" . mysql_result($result, $i, 'team') . "</td>";
        echo "</tr>";           
    };
echo "</tbody>";

所有课程都成了

<tr class='my_class odd'>
<tr class='my_class even'>

我怎么能得到这个问题的解决方案？我想达到以下结果：

<tr class='green_class'>
    <td>Smith</td>
    <td>the Duck</td>
</tr>
<tr class='red_class'>
    <td>Jackbson</td>
    <td>Big great team</td>
</tr>
<tr class='green_class'>
    <td>Awaiters</td>
    <td>the flowers</td>
</tr>

Answer 1

看起来你正在服务器端渲染表，然后将其发送回客户端，然后在其上调用DataTables。这是对的吗？

另一种方法是在“server-side processing”模式下使用DataTables，这意味着服务器只会发回当前“页面”的数据的JSON。或者，如果您的数据源不是特别大，您可以使用Ajax源（它也应该返回JSON，但整个数据集）。然后你可以使用fnRowCallback函数设置样式[编辑：现在简称为“rowCallback”，从1.10开始]。您将从数据集中获取类名，并使用jQuery将其添加到行中。

这样的事情：

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var rowClass = aData[4] // imagining that your class is found in column 4  
  $(nRow).addClass(rowClass);
  }
}

<小时/> 作为一个完全迂腐的你可以忽略（因为它只是我在没有被邀请的地方戳我的鼻子），使用彩色类可能不是最佳的长期决定。我假设“红色”，“绿色”等都对应于个人记录的某种状态。也许“绿色”意味着“目前活跃”或类似的东西。您应该使用反映目的而不是外观的类，因为有一天您可能会认为“紫色”实际上是代表“当前活动”（或其他）的更好的颜色。

Answer 2

在这里查看文件： https://datatables.net/reference/option/createdRow

我这样解决这个问题：

jQuery('.js-dataTable-full').dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "/path/to/ajax",
        "createdRow": function(row, data, index) {
            if(data.condition) {
                $(row).addClass('warning');
            }
        },
 });

Answer 3

之前设置默认类。

$。fn.dataTableExt.oStdClasses.sStripeOdd ='';

$。fn.dataTableExt.oStdClasses.sStripeEven ='';

如需进一步参考，请参阅此处

http://www.datatables.net/styling/custom_classes

Answer 4

如果您添加了行，则需要为此行添加唯一类

var table = $('#example').DataTable();
var id = 99;

table
    .row
    .add(['cell-1', 'cell-2', 'cell-3', 'cell-4',])
    .draw()
    .nodes()
    .to$()
    .addClass( 'js__list-item-'+id );

结果

<tr class="js__list-item-99 odd" role="row">
     <td>cell-1</td>
     <td>cell-2</td>
     <td>cell-3</td>
     <td>cell-4</td>
</tr>

Answer 5

您需要将其设置为使用服务器端处理第一。完成后，您可以在JSON或PHP数组中指定行的类名应使用DataTable自己的格式：

'DT_RowClass' => 'class',

这是直接从他们的论坛： http://datatables.net/forums/discussion/7100/dt-rowid-and-rowclass

Answer 6

试

echo "<tbody>";
    for($i=0; $i < $number_of_results; $i++){
        if($i%2==0){
            echo "<tr class='even'>";
          else
             echo "<tr class='odd'>";
            echo "<td>" . mysql_result($result, $i, 'family_name') . "</td>";
            echo "<td>" . mysql_result($result, $i, 'team') . "</td>";
        echo "</tr>";           
    };
echo "</tbody>";

无法在DataTables中设置行类

6 个答案: