javascript 如何使用 datatables.js 将 Css 类应用于一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27123409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply Css class to a row using datatables.js?
提问by Adhik
I have retrieved table from SQL procedure contains column with name of class that is to be applied on that particular row.
However that table is passed to datatable.js as a data-source.
Now with my code, specified class is getting applied to only one cell: in fnRowCallback()function.
I want is to apply that class to entire row.
我从 SQL 过程中检索到的表包含具有要应用于该特定行的类名称的列。
但是，该表作为数据源传递给 datatable.js。现在使用我的代码，指定的类只应用于一个单元格：在fnRowCallback()函数中。我想要的是将该类应用于整行。
Here is my javascriptcode:
这是我的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');
}
}
});
});
Sample Datatable string (class is specified in last column) passed to function is:
传递给函数的示例数据表字符串（类在最后一列中指定）是：
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'];
回答by dreyescat
I think the problem comes from what you think you get in aData. When the fnRowCallbackcallback is called aDatais not an object with the key corresponding to the column titles. It is just the data (array) corresponding to that row. Exactly the same arrays as the one you passed in the dataSet. So, if you want to get the csscolumn you need to know the index of that column in you array. It seems easy in your case because it happens to be the last one. So you can do something like this to get the css class name:
我认为问题出在你认为你得到了什么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');
}
}
Or if you want to apply whatever class contained in the css column:
或者，如果您想应用 css 列中包含的任何类：
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
$(nRow).addClass(aData[aData.length - 1]);
}
See demo.
见演示。
回答by Frank
You could use the DataTables createdRow event to add a class (just as their example, except you would add the class in one of the row's fields)
您可以使用 DataTables createdRow 事件添加一个类（就像他们的例子一样，除了您将在行的字段之一中添加该类）
See http://www.datatables.net/examples/advanced_init/row_callback.htmlfor an example
有关示例，请参见http://www.datatables.net/examples/advanced_init/row_callback.html
The value for that specific row can be gotten from the data array. For example, if the class is in column 5, add the class to the row
可以从数据数组中获取该特定行的值。例如，如果类在第 5 列，则将该类添加到行
$(document).ready(function() {
$('#example').dataTable( {
"createdRow": function ( row, data, index ) {
$(row).addClass(data[5]);
}
} );
} );
回答by sman0307
If it were pulling from a database the data would have a primary key, and therefore just use getElementbyId and apply the appropriate styling
如果它是从数据库中提取的数据将有一个主键，因此只需使用 getElementbyId 并应用适当的样式
document.getElementById("dataSetID")
