jQuery DataTables add class to row on event based on table data

Question

I'm trying to code a button click in jQuery that will search all the row data returned from DataTables, find only rows that have an email address, then add the .selected class to that particular row.

I have been able to get the following code to work just fine, but it only adds the .selected class to the current view of the table. Not the entire data set. So, when the user switches pages or narrows the search the data that should have the .selected class does not have it.

$( '#testButton' ).click(function(){
    $( '#table tr' ).each( function (){
        var rowData = oTable.row( this ).data();
        if( rowData !== undefined ){

            if( rowData.email.length > 4 ){
                //console.log( "found an email :"+rowData.email );
                $( this ).addClass( 'selected' );
            }

        }
    });
}

Here is the jQuery code I have tried to use, but I can't get it to work correctly. It does seem to add the .selected class however, it's not adding it to the correct rows. It seems to be randomly adding the .selected class to rows. The weird thing though is the console output line is identifying the correct row indexes and email addresses based on the json data set. Does anyone know how to correctly do what I'm attempting to do?

var oTable = $( '#table' ).DataTable({
    'ajax': {
        url: 'get-json-data.php',
        type: "POST",
        dataSrc: function ( data ) {
                return data;
            },       
    },
   'columns': [
            { 
                "data": "name",                   
                "render": function ( data, type, row ) {
                        return "<a id='"+row.id+"'>"+data+"</a>";
                }
            },
            { 
                "data": "company",                    
                "render": function ( data, type, row ) {
                        return data;
                }
            }   
    ],
    stateSave: true,
    responsive: true,
    createdRow: function ( row, data, index ) {
        row.setAttribute( 'id',data.id );       
    }
});

$( '#testButton' ).click(function(){
    var rowData = oTable.rows().data();
    $( rowData ).each( function ( i, e ){
        if( rowData[i].email !== undefined ){

            //only show data long enough to be an actual email address
            if( rowData[i].email.length > 5 ){

                // this shows the correct information
                console.log( "On row "+i+" found this :"+rowData[i].email+" address" );

                // this applies the selected class to the wrong row
                $(oTable.row(i).node()).addClass('selected');
            }

        }
    });
});

sample json data set returned from get-json-data.php:

{"id","1","name":"someName","email":"","company":"companyName"},
{"id","2","name":"someName1","email":"[email protected]","company":"companyName1"},
{"id","3","name":"someName2","email":"[email protected]","company":"companyName2"}

BTW: I'm using the jQuery DataTables plugin available Here version 1.10.15

Community · Accepted Answer · 2017-05-23 12:26:25Z

1

Thanks to a similar answer located HERE I was able to solve this. The following code does exactly what I want it to do and applies the .selected class to only rows that contain an email address in the table data.

oTable.rows().every(function(rowIdx, tableLoop, rowLoop){
    var rowData = this.data();
    if(rowData.email !== undefined){
        if(rowData.email.length > 4){
            console.log("on row "+rowIdx+" found :"+rowData.email+ " address");
            $(this.node()).addClass('selected');
        }
    }       
});

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 11, 2017 at 15:42

Austin

1,6277 gold badges26 silver badges52 bronze badges

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

1 Comment

davidkonrad Over a year ago

if (rowData.email && rowData.email.length > 4) { would be more readable. Just my two c. Remember to mark your own answer as accepted. Perhaps it will help other people in the future.

Collectives™ on Stack Overflow

jQuery DataTables add class to row on event based on table data

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related