如何使用datatables.js将Css类应用于行？

Question

我从SQL过程中检索了包含要在该特定行上应用的类名称的列 但是，该表作为数据源传递给datatable.js。 现在使用我的代码，指定的类只应用于一个单元格：fnRowCallback()函数。 我想要将该类应用于整行。

这是我的javascript代码：

var dataSet = JSON.parse("[" + a.toString() + "]")    
$(document).ready(function () {
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,                
        "columns": [
                        { "title": "Center" },
                        { "title": "Call Executive" },
                        { "title": "Name" },
                        { "title": "Mobile" },
                        { "title": "Phone" },
                        { "title": "Status" },
                        { "title": "Appt Date" },
                        { "title": "Joined Date" },
                        { "title": "Remark" },
                        { "title": "Source" },
                        { "title": "Publisher" },
                        { "title": "css" },
                      ]
                      ,
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            if (aData["css"] == "gradeC") {
                $(nRow).addClass('gradeC');
            }
            else {
                $(nRow).addClass('gradeN');
            }
        }

    });
});      

传递给函数的示例数据字符串（在最后一列中指定了类）是：

    var dataSet = ['Dadar', 'lmsSenitaD', 'Atul salaskar', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Come back and Join', 'Mobile', 'Times','gradeC'],
['Aundh', 'Rashmi', 'Preeti Gupta', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Will Discuss with Family', 'Online Campaign', 'Iksula','gradeN'],
['Do@Home_Thane', 'Rashmi', 'Mitali Gupta', '9876543210', '', 'Joined - Old Date', '10/01/2014', '20/08/2014', 'Come back and Join', 'Online Campaign', 'Iksula','gradeC']; 

Answer 1

我认为问题来自于您认为aData中的内容。调用fnRowCallback回调时aData不是具有与列标题对应的键的对象。它只是与该行对应的数据（数组）。与您在dataSet中传递的数组完全相同的数组。因此，如果要获取css列，则需要知道数组中该列的索引。在你的情况下似乎很容易，因为它恰好是最后一个。所以你可以做这样的事情来获得css类名：

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
    var css = aData[aData.length - 1];
    if (css == "gradeC") {
        $(nRow).addClass('gradeC');
    }
    else {
        $(nRow).addClass('gradeN');
    }
}

或者，如果您想应用css列中包含的任何类：

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
    $(nRow).addClass(aData[aData.length - 1]);
}

请参阅demo。

Answer 2

如果从数据库中提取数据，则数据将具有主键，因此只需使用getElementbyId并应用适当的样式

document.getElementById("dataSetID")

Answer 3

您可以使用DataTables createdRow事件添加一个类（就像他们的示例一样，除了您要在行的某个字段中添加该类）

请参阅http://www.datatables.net/examples/advanced_init/row_callback.html以获取示例

可以从数据数组中获取该特定行的值。 例如，如果类在第5列中，则将类添加到行

$(document).ready(function() {
    $('#example').dataTable( {
        "createdRow": function ( row, data, index ) {
            $(row).addClass(data[5]);
        }
    } );
} );