Question

我正在使用数据表来显示分页结果。

在我的要求的一个用例中，我需要突出显示某行中的某些列。这些列因行而异。此外，有关每行要突出显示的列的信息是在运行时获得的，即在对结果集进行ajax调用之后。

有关如何实现此行为的任何建议。

Answer 1

您可以将click侦听器附加到每行，使用jQuery查找要为该行突出显示的单元格，然后将突出显示样式添加到该单元格。由于表可以有很多行，因此最好使用委托事件处理程序（表中所有行都有一个处理程序）。

在此示例中，我使用data()方法来存储和检索最多3个随机列的数组以突出显示，但您可以调整点击处理程序以从隐藏列中查找值。

$(document).ready(function() {
    $('#example').dataTable({
        "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            var colsToHighlight = [];
            for(var i=0; i<2; i++) {
                colsToHighlight.push(parseInt((Math.random() * 10), 10) % 5); // pick up to 3 random columns to highligh, may be less due to collisions
            }
            $(nRow).data('highlightCols', colsToHighlight);
        }
    });
} );

$('table').on('click', 'tr', function(e) {
    var row = $(this);
    var colsToHighlight = row.data('highlightCols');
    for(var i=0; i<colsToHighlight.length; i++) {
        row.find('td:eq(' + colsToHighlight[i] + ')').addClass('highlight'); //look up column by index and add highlight class
    }    
});

突出显示数据表中的列

1 个答案: