How to adjust datatables css for individual cells dynamically

Question

2.00/5 (1 vote)

See more:

Hi -

I am using the jquery datatables. What I'm trying to do is adjust a column css based on another column if it contains an @ symbol. So here is the code that i've tried and cant seem to get working. Here is how the table is rendered.

JavaScript

var table = $("#datatable").DataTable({
    searching:false,
    data: data,
    columns: [
        {
           'className': 'details-control',
           'data': null,
           'defaultContent': ''
        },
        {
            'data': 'id',
            'render': function (id) {
                return '<a href=' + 'Default_XXXXX.aspx?XXXX='+ id + '>' + id+'</a>'
            }
        },
        { 'data': 'orderId' },
        { 'data': 'description'},
        { 'data': 'machineType' },
        { 'data': 'manufacturer' },
        {
            'className': 'valid-id',
            'data': null,
            'defaultContent': '',
            'sortable': false,
            'render': function (id) {
                var validId = $(this).closest('tr').find('td:eq(1)').text();


                if (validId.charAt(0) === "@") {

                    $("#datatable tbody").closest('tr').find('td:eq(6)').removeClass('valid-id');
                    //$("#datatable tbody").closest('tr').find('td:eq(6)').addClass('invalid-id');
                }
            }
        }
    ]
});

What I have tried:

I've tried first finding the id text. Then using the substring or the charAt to determine if first character was "@" symbol. then from there find the table cell remove the initial class and add the invalid class. I've even tried a regular expression but in the render nothing is happening.

Posted 8-Feb-16 5:36am

Troy Bryant

Updated 8-Nov-18 1:15am

Add a Solution

3 solutions

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)

4d.kh4n · Answer 1 · 2018-11-08T01:15:00

This Solution help fix my problem might help u.

for more info check this link: columns.createdCell

Using createdCell manipulate the DOM within columnDefs options.

For example,

JavaScript

var table = $("#datatable").DataTable({
searching:false,
data: data,
"columnDefs": [
{
   "targets": [1] // first CELL That will be checked,
   "createdCell": function (td, cellData, rowData, row, col) {
             if (cellData < 1) {
                 $(td).addClass('someClass');
              }
    }
 },{
   "targets": [2] //second CELL That will be checked,
   "createdCell": function (td, cellData, rowData, row, col) {
             if (cellData < 1) {
                 $(td).addClass('someClass');
              }
    }
 }  ],
...Etc

Richard Deeming · Answer 2 · 2016-02-08T06:08:00

Solution 1

Why are you using $("#datatable tbody").closest('tr')?

That's looking for the closest tr element which is a parent of the tbody element. Unless you're nesting your tables, that won't work.

I suspect you meant to use $(this).closest('tr') instead.

Also, the index passed to .eq()[^] is zero-based. You're trying to modify the seventh cell in the row, but it looks like you want to modify the sixth cell instead.

JavaScript

'render': function (id) {
    var validId = $(this).closest('tr').find('td:eq(1)').text();
    if (validId.charAt(0) === "@") {
        $(this).closest('tr').find('td:eq(5)').removeClass('valid-id');
        //$(this).closest('tr').find('td:eq(5)').addClass('invalid-id');
    }
}

Posted 8-Feb-16 6:08am

Richard Deeming

Updated 8-Feb-16 8:43am

v2

Comments

Troy Bryant 8-Feb-16 12:39pm

made that change but still cant remove that class

Richard Deeming 8-Feb-16 13:09pm

Is the class being added after the cell has been rendered?

Try adding console.log($(this).closest('tr')); to the function, to see if it's finding the row correctly.

Troy Bryant 8-Feb-16 14:02pm

class is being added as the table is being initialized

Richard Deeming 8-Feb-16 14:10pm

And the output from console.log? Is it finding the parent tr?

Troy Bryant 8-Feb-16 14:39pm

Its finding the current table row.

Richard Deeming 8-Feb-16 14:41pm

OK, so is the seventh cell of that row the one you want to modify? Based on your question, I suspect you want to modify the sixth cell instead.

NB: The index passed to eq(...) is zero-based, so eq(6) gives you the seventh matching item.

Troy Bryant 8-Feb-16 14:50pm

I want to change the class of the 6th table cell

Richard Deeming 8-Feb-16 14:51pm

OK, so as I said, you need to change eq(6) to eq(5).

Troy Bryant 8-Feb-16 15:57pm

I have no idea what I was thinking or why I was trying that. Simply just going after the class name and removing it worked.

Sergey Alexandrovich Kryukov · Answer 3 · 2016-02-08T13:07:00

You either have static CSS classes and add/remove them to/from element dynamically, or you can just use HTMLElement.style.* properties immediately. Last option is probably obvious, and the second one is done in jQuery in the following way:
.addClass() | jQuery API Documentation[^],
.removeClass() | jQuery API Documentation[^],
.toggleClass() | jQuery API Documentation[^],
see also CSS | jQuery API Documentation[^].

—SA

How to adjust datatables css for individual cells dynamically

3 solutions

Solution 3

Solution 1

Solution 2

Add your solution here

Preview 0