Change cell format by row and column number

mikep

Hi,

I am trying to work out how to select a cell by row and column number and then change the colour of the text in that cell to 'Red' is this possible and how do you do it please?

Mike

ThomD

I use the createdRow option to set styles on cells based on their values.

https://datatables.net/reference/option/createdRow

mikep

Thenks, yes I have seen that but in this instance I want to select by specific row and column

ThomD

You'll need to be more specific for me to understand why that solution doesn't work for you.

When and why do you want to color in a cell?

mikep

Ok so I am comparing two identical history tables and where an item in the second table has any changes I am wanting to highlight that cell by either bold or changing the text colour. For each row I know which cell has changed. So all I want to do is select the cell that has changed and apply a cell only format to make it stand out. Sorry about the hassle but this is the very last thing I need to do with this application.

ThomD

Without some code to see, it is hard to give a specific answer. The key is when in your processing do you know that a cell needs a style applied. For example, I have a cell that gets a style based on some data for that record that I don't even display. I use the rowCallback function to do this.

    rowCallback: function( nRow, aData, iDisplayIndex ) {
    /* numbers greater than 1.199 should be in red text */
        if (parseFloat(aData.TotalVariablePaymentsAsPercent) > .20 ) {
            jQuery('td:eq(12)', nRow).addClass('alert');
        }               
        return nRow;
         },

The isn't so much a DT question, as a jQuery technique.

mikep

Thanks that made me think outside the box a bit better and I understand how you have structured that function and how the row can be set but what about a single field in the row can that be set by the cell().

ThomD

My code is setting the class on a single TD in the row (number 12), not the entire row.

If you are outside the rowCallback, the cells() API shows how to select a cell by row and ciolumn count.

http://datatables.net/reference/api/cells()

So, if you know (by what ever logic works for you), that you want row 7, column 9 to get a style applied, this should do it

var table = $('#myTable').DataTable();

$(table.cell(7,9)).addClass('alert');

One of the things it took me a while to figure out was the interplay between the DataTables API and JQuery.

mikep

You are a genius I could not for the life of me work out the JQuery side of it I didnt get $('#myTable'String). I tried $('#example').DataTable what does the String specifier

ThomD

Sorry, that string bit was a copy/paste artifact. I've corrected my post.

mikep

    var table = $('#example').DataTable( {
    data: dataSet,
    columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" },
        { title: "Extn." },
        { title: "Start date" },
        { title: "Salary" }
    ]
} );
$(table.cell(7,9)).addClass('alert');

didnt change the cell format am I missing something

ThomD

Did you define a style for 'alert'? That's not going to work because you don't have 10 columns.

mikep

Good point I didnt copy the above code from my script so the 7,9 was actually 1,1 but addClass? might have known its more complicated, cant find a reference to how a style is defined?

ThomD

Styles are Cascading Style Sheet styles.

Just to demo that your code otherwise works, try this

$(table.cell(1,1)).css({ border: "1px solid orange" });

This should apply the inline styling so that you don't have to define an "alert" style. Once that works you can move on to custom styles.

mikep

turns out addClass cannot be applied to a cell or cells :( ok thanks for the point above but where in the code structure does that go?

ThomD

typo in my last example. Fixed it. Try again

.

mikep

Ok tried that debugger likes it but no orange CSS format applied to cell.

ThomD

Sorry about that. I had not used this function before and didn't have time to run any tests.

This is the correct syntax. Don't forget that cell numbering is zero based.

$(dtTable.cell(3,3).node()).css({ "background-color": "red" });

You need to run this after the table is initialized. if you run it in the InitComplete option, use this syntax.

$(this.api().cell(3,3).node()).css({ "background-color": "red" });