Question

我正在尝试突出显示或更改jQuery Datatable中所选行的背景颜色。我正在使用 rowCallback ，但没有任何反应。这是我的代码：

//..global variable , this is id of selected row
let selectedRowProfileId = ''; 

//..ready function
$(document).ready(function () {
if ($('#data-table').length !== 0) 
{
    $('#data-table').DataTable({
        autoFill: true,
        "scrollX": true,
        "columnDefs":
            [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
            ],

    });
}});

//..Click event fired whenever a user click on a cell or row
$('#data-table tbody').on('click', 'td', function () {



const tr = $(this).closest('tr');

const table = $('#data-table').DataTable();
const data = table.row(tr).data();

selectedRowProfileId = data[1];

//..Update UI
UpdateUIBySelectedProfileId(selectedRowProfileId);
});

UpdateUIBySelectedProfileId(selectedRowProfileId){

  //..Here i do ajax call based on the selectedRowProfileId
  //..Upon receiving the respone in success bloc of ajax call
  //..i re-draw the table like this :
  const clients = JSON.parse(reponse);
  const table = $('#data-table').DataTable();
  table.clear().draw(); 

  clients.forEach(client => {
     table.row.add([
        client['LastKnownZone'],
        client['ProfileId'],
        client['macAddress'],
        client['ssId'],
        client['Statut'],,
        client['LastLocatedTimeString'],
     ]);
  });

  if (selectedRowProfileId !== '')
                {
                    table.rows().eq(0).each(function (index)
                    {

                        const row = table.row(index);
                        const data = row.data();
                        //console.log(data[1]);
                        if (data[1] === selectedRowProfileId)
                        {
                            $(row).css("background-color", "Orange");
                            //$(row).addClass('label-warning');
                            //console.log(row);
                        }

                    });
                }


                table.draw();

}

所以我要实现的是在重绘表格时突出显示先前选择的行。

我正在尝试找出上述代码有什么问题。任何帮助将不胜感激。

谢谢

Answer 1

您尝试从rowCallback内更改行背景色，这是行不通的，因为它是在呈现表格之前触发的。

相反，您可以将“着色”代码放入行点击处理程序中（如建议的here）

以下演示是为了说明该概念：

const dataSrc = [
  {item: 'apple', cat: 'fruit'},
  {item: 'pear', cat: 'fruit'},
  {item: 'carrot', cat: 'vegie'}
];

const dataTable = $('#mytable').DataTable({
  dom: 't',
  data: dataSrc,
  columns: ['item', 'cat'].map(item => ({title: item, data: item}))
});

$('#mytable').on('click', 'tr', function(){
  $(this).toggleClass('selected');
  console.log(dataTable.row($(this)).data());
});

.selected {
  background: gray !important;
}

tbody tr:not(.selected):hover {
  cursor: pointer !important;
  background: lightgray !important;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>

以上代码假定您不使用'select'扩展DataTable

如果要求以上选择是持久性的（在重新绘制表时，例如由AJAX调用触发），则可以引入一个数组，用于存储表记录的ID（例如，const selectedRowIds = []在全局范围内），如果在selected中发现了行ID，则可以使用createdRow选项来在重画时重新应用类selectedRowIds：

const dataTable = $("#mytable").DataTable({
    ...
    createdRow: (row, data, dataIndex, cells) => {
        if (selectedRowIds.indexOf(data.id) > -1)
            $(row).addClass("selected");
    }
});

此外，应使用将在selectedRowIds中添加/删除选定行ID的逻辑扩展行点击处理程序：

$("#mytable").on("click", "td", function () {
    //get clicked table row node
    const clickedRow = dataTable.row($(this).closest("tr"));
    //append/remove selected row 'id' property value to global array
    selectedRowIds = $(clickedRow.node()).hasClass("selected")
         ? selectedRowIds.filter(rowId => rowId != clickedRow.data().id)
         : [...selectedRowIds, clickedRow.data().id];
    //toggle class 'selected' upon clicking the row
    $(clickedRow.node()).toggleClass("selected");
});

您可以在here上找到完整的 demo ，或使用浏览器的开发工具（通过this链接进行检查）。

Answer 2

尝试更改row的td标签的背景颜色。

$('td', row).css('background-color', 'orange');

无法更改DataTable jQuery中选定行的背景颜色

2 个答案: