jQuery数据表行背景颜色在排序列中没有改变

Posted 2023-05-09

【中文标题】jQuery数据表行背景颜色在排序列中没有改变

【英文标题】：jQuery datatable row background color not changing in sorted column

【发布时间】：2020-11-11 10:48:34

【问题描述】：

我正在使用 jQuery 数据表，我希望根据条件更改背景颜色，将已排序的行悬停在我的图像上没有我的背景颜色。

这是我的条件

        "rowCallback": function (row, data, index) 
            if (data.componente.default_ubicacion.ubicacion_id === 0) 
                $(row).css("background-color", "rgb(225, 27, 27, 100%)");
                $(row).css("color", "white");
                $(row).addClass("group");
            
        ,

这是导致问题的 css

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 
    background-color: #f1f1f1;


table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 
    background-color: #fafafa;

我该如何解决这个问题？

【参考方案1】：

试试这个：

"rowCallback": function (row, data, index) 
        if (data.componente.default_ubicacion.ubicacion_id === 0) 
            $(row).css("background-color", "rgb(225, 27, 27, 100%)");
            $(row).css("color", "white");
            $(row).addClass("yourClassName");
        
    

然后在您的 CSS 文件中包含以下内容：

table.dataTable.display tbody tr.yourClassName.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.even > .sorting_1 
    background-color: transparent;


table.dataTable.display tbody tr.yourClassName.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.odd > .sorting_1 
    background-color: transparent;

显然我不知道你的数据，但我为你准备了一个小例子：

var oTable = $('#tableName').DataTable( 
    rowCallback: function(row, data, index)
    if(data[0] == 2)
        $(row).css('background-color', 'rgb(225, 27, 27, 100%)')
            .css('color', 'white')
            .addClass('yourClassName');
    
  
);

table.dataTable.display tbody tr.yourClassName.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.even > .sorting_1 
    background-color: transparent;


table.dataTable.display tbody tr.yourClassName.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.yourClassName.odd > .sorting_1 
    background-color: transparent;

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<div class="data-table-container">
  <table id="tableName" class="table cell-border order-column stripe">
   <thead>
    <tr>
        <th>Rank</th>
        <th>Country</th>
        <th>Code</th>
        <th>Total</th>
        <th>Beer</th>
        <th>Wine</th>
        <th>Spirits</th>
        <th>Other</th>
        <th>Score</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Estonia</td>
        <td>EE</td>
        <td>14.97</td>
        <td>5.87</td>
        <td>1.65</td>
        <td>5.64</td>
        <td>1.81</td>
        <td>3 - Medium Risky</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Belarus</td>
        <td>BY</td>
        <td>14.44</td>
        <td>2.5</td>
        <td>0.75</td>
        <td>6.73</td>
        <td>4.46</td>
        <td>4 - Very Risky</td>
    </tr>
  </table>
</div>