How to change a particular column background color in jquery of a datatable

Question

0.00/5 (No votes)

See more:

Hi,

i'm new to Jquery,so can anyone tell me ,How to change a particular column background color in jquery of a datatable while loading?

plz help me out..

Posted 12-Mar-13 23:39pm

Saroj Kumar Sahu

Updated 13-Mar-13 18:15pm

v2

Add a Solution

Comments

rama charan 13-Mar-13 5:52am

Please be more specific what markup you have
post how your datatable renders in html

Saroj Kumar Sahu 13-Mar-13 7:54am

Hi,thnks 4 reply..in my appl,am binding the datatable using ajax call.like
var srch = "{'srch':" + JSON.stringify(searchObject) + "} ";
$.ajax({
"type": "POST",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": sSource,
"data": srch,
"success": fnCallback
});
},
aoColumns: [
/* A*/{'sSortDataType': 'dom-text', 'sWidth': '15%' },
/* B*/{'sWidth': '15%' },
/* C*/{'sWidth': '20%' },
/* D*/{'sSortDataType': 'dom-text', 'sType': 'date', 'sWidth': '8%' },
/* E */{'bSortable': false, 'sWidth': '5%', 'sClass': 'alignRight' },

]
so while loading that datatable i need to set a column(for example D column) backgroungd color.

Prasad Khandekar 13-Mar-13 6:04am

Hello,

As long as you can get a handle to the column in question it's very easy in JQuery. Use something like

$('#COL_ID').css('background-color', '#2080D0');

Regards,

Saroj Kumar Sahu 13-Mar-13 7:55am

thanks 4 reply..can u plz tell me here how'll i get the column Id?

i tried both $('#tblSearch th:nth-child(6)').css('background-color', '#2080D0') and
$('#tblSearch td:nth-child(6)').css('background-color', '#2080D0')
but not working..

here tblSearch is my table id

3 solutions

Solution 2

I'd say a better option is to use the inbuilt jquery datatable feature to apply a style class to that column and then simply use css to set the background color for that class.

$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
      { "sClass": "my_class", "aTargets": [ 0 ] }
    ]
  } );
} );

Edit: Since you want the 4th column, and since the 'aTargets' parameter is 0-based, and just for arguments sake, if you wanted for more columns, say the 6th and 8th too, then

$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
      { "sClass": "my_class", "aTargets": [ 3, 5, 7 ] }
    ]
  } );
} );

and then for the style

.my_class {
background-color: Red;
}

Posted 13-Mar-13 18:48pm

Hariharan Arunachalam

Updated 27-Mar-13 22:49pm

v2

Comments

Saroj Kumar Sahu 14-Mar-13 2:31am

Hi,thnks 4 reply..in my appl,am binding the datatable using ajax call.like

var srch = "{'srch':" + JSON.stringify(searchObject) + "} "; $.ajax({ "type": "POST", "dataType": 'json', "contentType": "application/json; charset=utf-8", "url": sSource, "data": srch, "success": fnCallback }); }, aoColumns: [ /* A*/{'sSortDataType': 'dom-text', 'sWidth': '15%' }, /* B*/{'sWidth': '15%' }, /* C*/{'sWidth': '20%' }, /* D*/{'sSortDataType': 'dom-text', 'sType': 'date', 'sWidth': '8%' }, /* E */{'bSortable': false, 'sWidth': '5%', 'sClass': 'alignRight' },

so while loading that datatable i need to set a column(for example D column) backgroungd color. can u tell me where i need to put aocolumnDef..

I tried after aoColumns:[] but no results..

kishore sharma 14-Mar-13 5:39am

This is quite best way instead.

Solution 1

I am explaining you how you can style the cell on conditions.

First define the css you want to apply for that perticuler cell

CSS

<style>
  .grdCell
        {
background-color:Red;
        	}
</style>

once you done with this put the following Jquery function just next to your jquery dtatable function

JavaScript

$(function () {
            
            $(".mGrid td").filter(function () {
                return $(this).text() == "All";
            }).addClass("grdCell");
        });

where .mGrid is the css class you applied for the grid replace with your css class and the text 'All' is the text in cell you need to check in cell having the text value 'All'

your work is done-Happy coding

Posted 13-Mar-13 0:03am

kishore sharma

Comments

Saroj Kumar Sahu 13-Mar-13 7:48am

thanks for reply..but did u understand my question ?

kishore sharma 13-Mar-13 8:16am

What i understood is you need to change the style background of cell in jquerydatatable grid.
you try with this

Saroj Kumar Sahu 13-Mar-13 8:26am

not grid or cell..How to change the total column background color in jquery of a datatable ?

rama charan 14-Mar-13 4:40am

i think there no way you can directly change color of a column directly using jquery nor using css. You need to change background color of each of the cells in that column.

Saroj Kumar Sahu 14-Mar-13 8:02am

can u tell me how to change that cell background color..any sample ..

kishore sharma 14-Mar-13 5:36am

@rama charan you are right,because there is no tag for column its just combination of cells with same index. so the ultimate solution is to make background of td(cell) of same index.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Saroj Kumar Sahu · Accepted Answer · 2013-03-18T19:36:00

Solution 3

Hi all,
Thanks for help.i solved this issue using the following code on fnRowCallback.

$('#tblSearch td:nth-child(6)').css('background-color', '#f6a828');

Posted 18-Mar-13 19:36pm

Saroj Kumar Sahu

Updated 18-Mar-13 19:39pm

v2

Comments

Hariharan Arunachalam 28-Mar-13 4:51am

Using a callback on every column seems a little overkill to me; for applying styles that is, since the you are using the style application in the code, it could be a problem later on while trying to apply/switch styles.