[英]how to change the row color in jquery dataTable based on the value
我在javascript和jquery中使用DataTable來設置交互式表格。 我想基於單元格值更改行顏色。
我嘗試使用fnRowCallback函數,並且嘗試使用rowCallback函數。
這兩個功能都無法正常工作,頁面也沒有顯示表格。
如果我刪除這些功能,則會顯示該表,並且所有數據都可用。
$(function(){
var destsData=[
]
var sections={}
var theTable = $('#SearchT2chiraTable').DataTable({
language: {
search: 'ﺑﺤﺚ : ',
lengthMenu:'ﻣﺸﺎﻫﺪﺓ _MENU_ ﺑﻴﺎﻧﺎﺕ',
paginate: {
first: "اﻻﻭﻝ",
previous: "اﻟﺴﺎﺑﻖ",
next: "اﻟﺘﺎﻟﻲ",
last: "اﻻﺧﻴﺮ"
}
},
select: 'single'
})
var destsTable = $('#DestsTable').DataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
if ( aData[2] == "DEFAULT VALUE" )
{
$('td', nRow).css('background-color', 'red' );
}
else
{
$('td', nRow).css('background-color', 'white');
}
language: {
search: 'ﺑﺤﺚ : ',
lengthMenu:'ﻣﺸﺎﻫﺪﺓ _MENU_ ﺑﻴﺎﻧﺎﺕ',
paginate: {
first: "اﻻﻭﻝ",
previous: "اﻟﺴﺎﺑﻖ",
next: "اﻟﺘﺎﻟﻲ",
last: "اﻻﺧﻴﺮ"
}
},
select: 'single',
data: destsData,
columns: [
{ "data": "destination_id","title":'اﻟﺮﻣﺰ' },
{ "data": "te2chira_id_id","title":'ﺭﻣﺰ اﻟﺘﺄﺷﻴﺮﺓ' },
{ "data": "opinion", "title": 'اﻻﻗﺘﺮاﺡ' },
{ "data": "destination_date","title":'اﻟﺘﺎﺭﻳﺦ' },
{ "data": "section","title":'اﻟﻘﻄﻌﺔ' ,
"render":function(val,type,row,meta){
console.log('the Value is ',val)
if (type == 'set'){
console.log('doing here ')
row.section = val
row.section_display=sections[row.section]
row.section_filter=sections[row.section]
return
}else if (type === 'display',val) {
console.log('display')
return sections[val];
}
else if (type === 'filter') {
console.log('filter',val)
return row.section_filter;
}
// 'sort', 'type' and undefined all just use the integer
return row.section;
}
}
]
}
});
或第二個功能。
"rowCallback": function( row, data, index ) {
if ( data.opinion == "DEFAULT VALUE" )
{
$('td', row).css('background-color', 'Red');
}
else
{
$('td', row).css('background-color', 'white');
}
}
}
我希望在destTable中顯示數據,並且意見的值等於DEFAULT VALUE,以使行顏色變為紅色,否則將行保持白色。
你可以用另一種方式
{% for q in queryset %}
{% if q.id == 1 %}
<tr style="background: #fff;>
{% else %}
<tr style="background: #000;>
{% endif %}
<td></td>
</tr>
{% endfor %}
fnRowCallback
感覺是執行此操作的正確方法,但是我注意到您缺少右花括號和逗號-這將導致您的代碼中斷而不呈現表。
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
if ( aData[2] == "DEFAULT VALUE" )
{
$('td', nRow).css('background-color', 'red' );
}
else
{
$('td', nRow).css('background-color', 'white');
}
}, // Make sure you add the closing brace and a comma
language: {
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.