Using rowCallBack to add class to cell, works 100% on load, but missing something on updating a row

glenderson

I've successfully been able to add classes to a cell using rowCallback when loading a table. My rowCallback looks something like this. If I had 12 cells, there would be 12 code blocks like the following, one for each cell I'm going to add a class to.

var cellClass = data["cellClassfor_8"];  // Get's the class from the data array
           $jq("td:eq(8)", row).removeClass("lightredish lightgreen yellow");  // Remove any possible classes
         if (cellClass) { // Make sure cell exists
           if (cellClass.length) {  // Only add class if there is a call content
             $jq("td:eq(8)", row).addClass(cellClass);  // use jQuery to add the class
           }
         }

This works fine and 100% when performing a data load for the first time. I load tables via ajax.

The update row code looks something like this (note, I'm removing rows to make it easier to view).

var d = table.row(myrow).data();  // Get the data row we are updating
d[8]="0.90"; // Update the contents
d["cellClassfor_8"]="yellow";  // Update the cell class (the rowCallback performs the actual change)
table.row(myrow).data(d);  // Refresh the data array with the new contents
table.row(myrow).draw();  // .draw() could be on the previous line, separated to trouble shoot only

My problem is when I update a row. The contents or inner HTML update no problem at all, it's the class that is not getting to the displayed results. If I send the class to the console.log, it shows that the rowCallback is doing what is expected, it's removing the classes and adding the new classes. If I sort the table (user action), then the row class is correctly displayed. I'm looking for that function / method which will just redraw the table or row without changing it's position. table.draw() and table.row().draw do not seem to do this. Would appreciate some suggestions.

ThomD

I think your problem may be in you jq selector. The comma delimiter is an "OR" function, not an "AND" function. So you selecting the row AND the 8th td element. Is that really what you want to do there?

BTW, if you want to remove all classes, you can use removeClass() with no parameters.

glenderson

Thanks Thomb,

Yes, I really want to select a row and a cell. This is the manner that a cell is selected throughout the dataTables examples in rowCallback. It's so we can add a class (color) to each cell individually. As mentioned, in the console.log I am getting exactly what I want programmatically. On initial render of the table, it's perfect. It's only on update that the last piece of the row being rendered that's presents a problem. To prove that the code is correct, all I have to do is hit the sort icon in the header after a row update and then the updated row renders 100% correct. But, I shouldn't have to manually sort to render the row correctly.

I'm also not removing all classes. I'm actually passing a palette of "colorized" cells (red, green, yellow plus others depending upon the table as this is really in a interface class), the cells have additional classes they get from the columns (left, right, center, bold, color, etc.) so we don't want to remove all classes, just the passed palette classes.

ThomD

What happens if you use the preDrawCallback instead of rowCallback?

ThomD

Oh, and can you put up a live example?

glenderson

When putting into a simple jsFiddle mockup, it seems to work as expected. Typing in a value (0-2) and the clicking off the input box to fire the onKeypress event causes the cell classes (colors) to update based upon the values.

http://jsfiddle.net/glenderson/f3ueuu62/3/

That means there's an event somewhere firing that's stopping the table from rendering.

In my real code, everything, of course, is ajax driven. I'll have to figure out what's intercepting the dom update.

ThomD

Thanks for the example. I guess the question comes down to what is triggering this

table.row(myrow).data(d); 

and why does that not trigger rowCallBack in your production environment. Just so I understand, you are seeing a change in the display value of the cell with that data() setter call?

Sorry I don't have an answer.

BTW, I was wrong about the function of the comma in the selector. Jquery treats that as a context selector, not an OR condition.

glenderson

After doing some more investigation, the issues appears to be on my side. I have a routine that nicely handles a highlighted row with cells of varying color and each cell is modified slightly as opposed to the entire row, red cells stays redish, green stay greenish, etc.). The initial cell color (class or style) is stored a on mouse in event and then restored on a mouse out event. The mouse out event was restoring the "old" class before the edit. So the table was getting the correct color, but the mouse out event was changing it to the before edit color. It's my issue to resolve.