jquery - 无法在 DataTables 中设置行类

Question

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

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

我认为可行的代码如下：

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>

score 4 · Accepted Answer

看起来您正在服务器端呈现表，然后将其发送回客户端，之后您在其上调用 DataTables。那是对的吗？

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

像这样的东西：

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

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

score 2 · Accepted Answer

在此处查看文档： 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');
            }
        },
 });

score 1 · Accepted Answer

之前设置默认类。

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

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

有关更多参考，请参见此处

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

score 1 · Accepted Answer

如果您添加了行并且您需要为此行添加唯一的类

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>

score 1 · Accepted Answer

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

'DT_RowClass' => 'class',

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

score 0 · Accepted Answer

尝试

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

jquery - 无法在 DataTables 中设置行类

6 回答 6

Related

Reference