Mixing
how to change the row color in jquery dataTable based on the value
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am using the DataTable in javascript and jquery in order to setup a interactive table. I want to change the row color based on cell value.
I tried to use the fnRowCallback function and i tried to use rowCallback function.
in both functions are not working and the page is not displaying the table.
if i remove these functions the table is displayed and all data are available.
$(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;
}
}
]
}
});
or the second function.
"rowCallback": function( row, data, index ) {
if ( data.opinion == "DEFAULT VALUE" )
{
$('td', row).css('background-color', 'Red');
}
else
{
$('td', row).css('background-color', 'white');
}
}
}
i expect to display the data in the destTable and where the opinion has a value equal to DEFAULT VALUE to make the row color red else to keep it white.
jquery django datatables
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
add a comment |
0
I am using the DataTable in javascript and jquery in order to setup a interactive table. I want to change the row color based on cell value.
I tried to use the fnRowCallback function and i tried to use rowCallback function.
in both functions are not working and the page is not displaying the table.
if i remove these functions the table is displayed and all data are available.
$(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;
}
}
]
}
});
or the second function.
"rowCallback": function( row, data, index ) {
if ( data.opinion == "DEFAULT VALUE" )
{
$('td', row).css('background-color', 'Red');
}
else
{
$('td', row).css('background-color', 'white');
}
}
}
i expect to display the data in the destTable and where the opinion has a value equal to DEFAULT VALUE to make the row color red else to keep it white.
jquery django datatables
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
add a comment |
0
0
0
I am using the DataTable in javascript and jquery in order to setup a interactive table. I want to change the row color based on cell value.
I tried to use the fnRowCallback function and i tried to use rowCallback function.
in both functions are not working and the page is not displaying the table.
if i remove these functions the table is displayed and all data are available.
$(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;
}
}
]
}
});
or the second function.
"rowCallback": function( row, data, index ) {
if ( data.opinion == "DEFAULT VALUE" )
{
$('td', row).css('background-color', 'Red');
}
else
{
$('td', row).css('background-color', 'white');
}
}
}
i expect to display the data in the destTable and where the opinion has a value equal to DEFAULT VALUE to make the row color red else to keep it white.
jquery django datatables
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
I am using the DataTable in javascript and jquery in order to setup a interactive table. I want to change the row color based on cell value.
I tried to use the fnRowCallback function and i tried to use rowCallback function.
in both functions are not working and the page is not displaying the table.
if i remove these functions the table is displayed and all data are available.
$(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;
}
}
]
}
});
or the second function.
"rowCallback": function( row, data, index ) {
if ( data.opinion == "DEFAULT VALUE" )
{
$('td', row).css('background-color', 'Red');
}
else
{
$('td', row).css('background-color', 'white');
}
}
}
i expect to display the data in the destTable and where the opinion has a value equal to DEFAULT VALUE to make the row color red else to keep it white.
jquery django datatables
jquery django datatables
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
edited Jan 3 at 9:10
Pyt Leb
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
asked Jan 3 at 9:05
Pyt LebPyt Leb
465
465
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
fnRowCallback feels like the right way to do this, but I notice you're missing a closing curly brace and a comma - which will cause your code to break and not render the table.
"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: {
...
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
add a comment |
0
You can this in another way
{% for q in queryset %}
{% if q.id == 1 %}
<tr style="background: #fff;>
{% else %}
<tr style="background: #000;>
{% endif %}
<td></td>
</tr>
{% endfor %}
answered Jan 3 at 9:10
shafikshafik
2,19631328
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>
– Pyt Leb
Jan 3 at 9:26
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019137%2fhow-to-change-the-row-color-in-jquery-datatable-based-on-the-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
fnRowCallback feels like the right way to do this, but I notice you're missing a closing curly brace and a comma - which will cause your code to break and not render the table.
"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: {
...
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
add a comment |
0
fnRowCallback feels like the right way to do this, but I notice you're missing a closing curly brace and a comma - which will cause your code to break and not render the table.
"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: {
...
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
add a comment |
0
0
0
fnRowCallback feels like the right way to do this, but I notice you're missing a closing curly brace and a comma - which will cause your code to break and not render the table.
"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: {
...
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
fnRowCallback feels like the right way to do this, but I notice you're missing a closing curly brace and a comma - which will cause your code to break and not render the table.
"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: {
...
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
answered Jan 3 at 14:26
Will KeelingWill Keeling
12.4k22736
12.4k22736
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
add a comment |
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
this was the error thank you. but i needed to specify the field name and the index of the field.
– Pyt Leb
Jan 4 at 9:55
add a comment |
0
You can this in another way
{% for q in queryset %}
{% if q.id == 1 %}
<tr style="background: #fff;>
{% else %}
<tr style="background: #000;>
{% endif %}
<td></td>
</tr>
{% endfor %}
answered Jan 3 at 9:10
shafikshafik
2,19631328
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>
– Pyt Leb
Jan 3 at 9:26
add a comment |
0
You can this in another way
{% for q in queryset %}
{% if q.id == 1 %}
<tr style="background: #fff;>
{% else %}
<tr style="background: #000;>
{% endif %}
<td></td>
</tr>
{% endfor %}
answered Jan 3 at 9:10
shafikshafik
2,19631328
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>
– Pyt Leb
Jan 3 at 9:26
add a comment |
0
0
0
You can this in another way
{% for q in queryset %}
{% if q.id == 1 %}
<tr style="background: #fff;>
{% else %}
<tr style="background: #000;>
{% endif %}
<td></td>
</tr>
{% endfor %}
answered Jan 3 at 9:10
shafikshafik
2,19631328
You can this in another way
{% for q in queryset %}
{% if q.id == 1 %}
<tr style="background: #fff;>
{% else %}
<tr style="background: #000;>
{% endif %}
<td></td>
</tr>
{% endfor %}
answered Jan 3 at 9:10
shafikshafik
2,19631328
answered Jan 3 at 9:10
shafikshafik
2,19631328
answered Jan 3 at 9:10
shafikshafik
2,19631328
answered Jan 3 at 9:10
shafikshafik
2,19631328
2,19631328
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>
– Pyt Leb
Jan 3 at 9:26
add a comment |
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>
– Pyt Leb
Jan 3 at 9:26
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:
<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>– Pyt Leb
Jan 3 at 9:26
i tried your answer where i add it inside the created table above the javascript code but it did not work. code:
<table id="DestsTable" class="searchte2chira" > {% for row in tableItems %} {% if row.opinion == "DEFAULT VALUE" %} <tr style="background: #fff;> {% else %} <tr style="background: #000;> {% endif %} <td></td> </tr> {% endfor %} </table>– Pyt Leb
Jan 3 at 9:26
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54019137%2fhow-to-change-the-row-color-in-jquery-datatable-based-on-the-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
