createdRow for Visible Columns

zgoforth

Hello,

I have a multi-tabbed DataTable and each different tabbed table represents a different Department. Through my REST I am calling 12-15 fields but only showing 8 different values.

Those are User/Name, Locations (a calculated field showing, MondayLocation, TuesdayLocation, WednesdayLocation, ThursdayLocation, & FridayLocation), Sunday, Monday, Tuesday,Wednesday,Thursday,Friday. The other values being pulled through the REST are MondayStatus, TuesdayStatus, WednesdayStatus, ThursdayStatus, FridayStatus.

I know I have to populate these to the table but give them no visibility for this to work. But if they are hidden can I still call the createdRow function to give the row a certain color based on the values in those fields. I.E (if all 5 status fields = P(present)) then display the row as green. Etc.

kthorngren

Use the data parameter of the createdRow callback to access the data for the row.

Kevin

zgoforth

@kthorngren

var table_IT = $('#it').DataTable({
          responsive: true,
          "createdRow": function( row, data, dataIndex ) {
             if ( data[9] == "P" && data[10] == "P" && data[11] == "P" && data[12] == "P" && data[13] =="P" ) {        
         $(row).addClass('green');
     
       }
            "columns": [
                { "data": "User.Title" },
                { "data": "Locations"},
                { "data": "Sunday", 
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
                },
                { "data": "Monday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                { "data": "Tuesday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                { "data": "Wednesday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                { "data": "Thursday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                { "data": "Friday",
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
            {"data": "Department",
              visible: false},
              {"data": "MondayStatus",
                visible: false},
              {"data": "TuesdayStatus",
              visible: false},
              {"data": "WednesdayStatus",
              visible: false},
              {"data": "ThursdayStatus",
              visible: false},
              {"data": "FridayStatus",
              visible: false}
            ],
            "order": [[ 1, "desc" ]]
      });

As you can see I implemented the "createdRow" callback within my table declaration, in my VSCode it tells me that @ "columns": [ ; is expected, and at "order": a ; is expected. After closing the table }); it tells me a , is expected? Am I implementing this right?

It works fine in this example http://live.datatables.net/tohehohe/6725/edit

zgoforth

And I just realized what I titled this discussion... I meant for hidden columns.

kthorngren

I meant for hidden columns.

I figured

You need to add a comma to separate the options on line 7 after the }. You are using object data so instead of data[9] you need to use data.MondayStatus or whatever the appropriate data point is.

Kevin

zgoforth

I inserted a comma after the option like the following, and it is still telling me the same issue.

var table_IT = $('#it').DataTable({
          responsive: true,
          "createdRow": function( row, data, dataIndex ) {
             if ( data.MondayStatus == "P" && data.TuesdayStatus == "P" && data.WednesdayStatus == "P" && data.ThursdayStatus == "P" && data.FridayStatus == "P") {        
                $(row).addClass('red');
          },
            "columns": [
                { "data": "User.Title" },
                { "data": "Locations"},
                { "data": "Sunday", 
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }

zgoforth

With the comma, in console it tells me unexpected token ',' and without the comma it tells me unexpected token ':' @ "columns": [

zgoforth

UPDATE: I was missing a bracket after line 7, it works perfectly now. But one question I still have related to this is can I have it highlight everything in the row but the User.Title field?

kthorngren

You can use the jQuery :not() selector. Maybe something like $('td:not(:first-child)', row).addClass('red');.

Kevin