jQuery 根据单元格值 DataTable 更改行背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25186921/
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
Change Row background color based on cell value DataTable
提问by Chelseawillrecover
I am using DataTable plugin to display some records. I have 3 rows, Name, Date, Amount. I want the background color of the row to change based on specific values in the amount column.
我正在使用 DataTable 插件来显示一些记录。我有 3 行，名称、日期、金额。我希望行的背景颜色根据金额列中的特定值进行更改。
This is my code:
这是我的代码：
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var table = $('#tid_css').DataTable({
'iDisplayLength': 100,
"bFilter": false,
"aaSorting": [
[2, "desc"]
]
});
});
</script>
As a test, I added below code alongside above code but getting below error
作为测试，我在上面的代码旁边添加了下面的代码，但得到以下错误
"DataTables warning: table id=tid_css - Cannot reinitialise DataTable"
“数据表警告：表 id=tid_css - 无法重新初始化数据表”
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#tid_css').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[2] == "1") {
$('td:eq(2)', nRow).html('<b>1</b>');
}
}
});
});
</script>
How easy can I do this using fnRowCallbackwith different conditions like if amount is 1 then color is Red, 2 = Blue, 3 = Blueetc.
使用fnRowCallback不同的条件（例如数量为 1 则颜色为、等）Red，我可以轻松做到这一点。2 = Blue3 = Blue
回答by Chelseawillrecover
OK I was able to solve this myself:
好的，我能够自己解决这个问题：
$(document).ready(function() {
$('#tid_css').DataTable({
"iDisplayLength": 100,
"bFilter": false,
"aaSorting": [
[2, "desc"]
],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[2] == "5") {
$('td', nRow).css('background-color', 'Red');
} else if (aData[2] == "4") {
$('td', nRow).css('background-color', 'Orange');
}
}
});
})
回答by devlin carnate
The equivalent syntax since DataTables 1.10+ is rowCallback
自 DataTables 1.10+ 起的等效语法是rowCallback
"rowCallback": function( row, data, index ) {
if ( data[2] == "5" )
{
$('td', row).css('background-color', 'Red');
}
else if ( data[2] == "4" )
{
$('td', row).css('background-color', 'Orange');
}
}
One of the previous answers mentions createdRow. That may give similar results under some conditions, but it is not the same. For example, if you use draw()after updating a row's data, createdRowwill not run. It only runs once. rowCallbackwill run again.
以前的答案之一提到createdRow。在某些条件下，这可能会产生类似的结果，但并不相同。例如，如果您draw()在更新一行的数据后使用，createdRow则不会运行。它只运行一次。 rowCallback将再次运行。
回答by gArn
DataTables has functionality for this since v 1.10
自 v 1.10 以来，DataTables 具有此功能
https://datatables.net/reference/option/createdRow
https://datatables.net/reference/option/createdRow
Example:
例子：
$('#tid_css').DataTable({
// ...
"createdRow": function(row, data, dataIndex) {
if (data["column_index"] == "column_value") {
$(row).css("background-color", "Orange");
$(row).addClass("warning");
}
},
// ...
});
回答by Norielle Cruz
Since datatables v1.10.18, you should specify the column key instead of index, it should be like this:
由于datatables v1.10.18，你应该指定列键而不是索引，它应该是这样的：
rowCallback: function(row, data, index){
if(data["column_key"] == "ValueHere"){
$('td', row).css('background-color', 'blue');
}
}
回答by Arpit Singh
I used createdRow Function and solved my problem
我使用了 createdRow 函数并解决了我的问题
$('#result1').DataTable( {
data: data['firstQuery'],
columns: [
{ title: 'Shipping Agent Code' },
{ title: 'City' },
{ title: 'Delivery Zone' },
{ title: 'Total Slots Open ' },
{ title: 'Slots Utilized' },
{ title: 'Utilization %' },
],
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
],
"createdRow": function( row, data, dataIndex){
if( data[5] >= 90 ){
$(row).css('background-color', '#F39B9B');
}
else if( data[5] <= 70 ){
$(row).css('background-color', '#A497E5');
}
else{
$(row).css('background-color', '#9EF395');
}
}
} );
回答by bhanu sengar
This is how managed to change my data table row background (DataTables 1.10.19)
这是如何设法更改我的数据表行背景（DataTables 1.10.19）
$('#memberList').DataTable({
"processing": true,
"serverSide": true,
"pageLength":25,
"ajax":{
"dataType": "json",
"type": "POST",
"url": mainUrl+"/getMember",
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "email" },
{ "data": "phone" },
{ "data": "country_id" },
{ "data": "created_at" },
{ "data": "action" },
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
switch(aData['country_id']){
case 1:
$('td', nRow).css('background-color', '#dacfcf')
break;
}
}
});
You can use fnRowCallbackmethod function to change the background.
您可以使用fnRowCallback方法功能来更改背景。
回答by satya prakash
I Used rowCallBack datatable property it is working fine. PFB :-
我使用了 rowCallBack 数据表属性，它工作正常。PFB :-
"rowCallback": function (row, data, index) {
if ((data[colmindx] == 'colm_value')) {
$(row).addClass('OwnClassName');
}
else if ((data[colmindx] == 'colm_value')) {
$(row).addClass('OwnClassStyle');
}
}
回答by Priya Chetwani
Callback for whenever a TR element is created for the table's body.
每当为表的主体创建 TR 元素时的回调。
$('#example').dataTable( {
"createdRow": function( row, data, dataIndex ) {
if ( data[4] == "A" ) {
$(row).addClass( 'important' );
}
}
} );
