Highlight specific row base on content in jquery datatables

Question

I am using jquery datatables.net and I have a table with information. In the one column I have true or false values for whether the user is active or not. I am trying to get it so when the value is false, highlight the value. Right now my code for my table settings looks like this:

        //Settings for datatable
        $('#userTable').DataTable({
            "jQueryUI": true,
            "serverSide": true,
            "ajax": {
                "type": "POST",
                url: "/Management/StaffGet",
                "contentType": 'application/json; charset=utf-8',
                'data': function (data) { console.log(data); return data = JSON.stringify(data); }
            },
            "columns": [
                { "data": "employeeNumber" },
                { "data": "firstName" },
                { "data": "lastName" },
                { "data": "role" },
                {
                    "data": "active",

                },
                {
                    "data": "employeeNumber",
                    "render": function (data, type, full, meta)
                    {
                        return '<a href="/Management/Edit/' + data + '">Edit </a> &#124; <a href="/Management/Delete/' + data + '">Delete </a>';
                    }
                }
            ],
            "order": [[ 0, "asc"]],
            "paging": true,
            "deferRender": true,
            "processing": true,
            "stateSave": false,
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            "pageLength": 10,
            "pagingType": "simple_numbers",
            "searching": false,
            "createdRow": function ( row, data, index ) {
                if (data[4] == "false" ) {
                    $('td', row).eq(5).addClass('highlight');
                       }
                 }
        });`

Then my code for css is:

`<style type="text/css">
      td.highlight {
      font-weight: bold;
      color: red;
     }
</style>`

I feel like there is a problem with the setting on the column, any help is appreciated.

When you inspect the td with your browser inspector, does it get the class of "highlight"? — random_user_name
– random_user_name, Commented Dec 22, 2015 at 15:08
no it doesn't. it doesn't show any instance of the 'highlight' for it — Matthew Czajka
– Matthew Czajka, Commented Dec 22, 2015 at 15:13
What do you get if you console.log(data[4]) right before your if statement: if (data[4] == "false" ) {? — random_user_name
– random_user_name, Commented Dec 22, 2015 at 15:32

scottysmalls · Accepted Answer · 2015-12-23 01:47:01Z

1

Try

$('#userTable').DataTable({
...
"createdRow": function( row, data, dataIndex ) {
    //console.log(data[4]);
    if ( data[4] == "false" ) {
            //console.log($(row).find("td").eq(4).html());
            $(row).find("td").eq(4).addClass( 'highlight' );
    }},
...

The commented log statements are in there to check you are getting and comparing the correct data.

Tested with datatables 1.10.1

answered Dec 23, 2015 at 1:47

scottysmalls

1,28117 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

scottysmalls Over a year ago

Sorry for the late response - holiday away from the computer =) "createdRow" was added in datatables 1.10. Is updating a possibility?

Matthew Czajka Over a year ago

i am currently using 2.1.4

Collectives™ on Stack Overflow

Highlight specific row base on content in jquery datatables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related