Live Conditional Formatting without updating data set

thegamechangerpro

How do I read a cell's value instead of the data set value, so that my formatting updates based on the cell value.

I think the following reads the DATA of the column "paperwork" for each row, but the value of that CELL will be changing regularly. I don't want to have to update my data-set (and refresh my table) every time I make an edit to get my row coloring to take affect. My data gets updated with each edit, but the dataset doesn't necessarily reflect the edit. Is there a solution?

if( data.paperwork == "Approved" ) {
$('td', row).addClass( 'lightGreen' );
}else if(data.paperwork =="approved"){
$('td', row).addClass( 'lightGreen' );
}else if(data.paperwork =="Esigned"){
$('td', row).addClass( 'lightAmber' );
}else if(data.paperwork =="esigned"){
$('td', row).addClass( 'lightAmber' );
}},

https://jsfiddle.net/01fct73o/

kthorngren

You will probably want to use rowCallback as it runs each time the table is drawn. createdRow runs only once when the row is first inserted into the DOM.

The row parameter contains the row's tr. See the updated test case with rowCallback showing how to get the highlighter checkbox checked state.
https://jsfiddle.net/anqy7edr/

Kevin

thegamechangerpro

Hi Kevin,

Thanks for the response. I am not sure I follow. The highlighter function has always worked with the createdRow function. I don't see where you made any changes to my original example.

kthorngren

To answer your question:

I don't want to have to update my data-set (and refresh my table) every time I make an edit to get my row coloring to take affect.

I added this:

rowCallback: function( row, data ) {
    
  var highlighter = $( 'input[name="highlighter"]', row );
  
  console.log(highlighter.is(':checked'));
},
//ROW COLORING
createdRow: function( row, data, dataIndex 

My data gets updated with each edit, but the dataset doesn't necessarily reflect the edit. Is there a solution?

If you want to update the Datatables data cache then you will need to use an event handler to update the data using row().data() or cell().data().

The highlighter function has always worked with the createdRow function.

I'm not sure what the highlighter function is. You have a lot of code there. If there is something specific you want us to look at then please simplify your test case to just show the issues you have questions about.

Kevin

kthorngren

Try checking one of the HL checkboxes. You will get an error (nothing related to Datatables). Sort the Sort column which will cause a table draw and rowCallback will run. You will see the output shows 3 False checked checkboxes and one that is True.

Kevin

thegamechangerpro

Hi Kevin,

I just can't seem to get this to work.
I have simplified to help me with this.

Do you mind helping me out?
https://jsfiddle.net/thegamechangerpro/dh67pjba/1/

By changing Approved to Esigned, the row should change orange.

kthorngren

I added a row with Esigned and it looks correct to me.
https://jsfiddle.net/nbex5sj1/

However if you are changing the data then use rowCallback instead of createdRow as mentioned above.

Kevin

thegamechangerpro

Hi Kevin,
Thanks for the quick response.

I couldn't get the rowCallBack to work on a input cell and not a checkbox.

kthorngren

If you are change the data with an input in the table see if this example helps:
https://live.datatables.net/zukacehi/100/edit

It updates the Datatables cache with the changed text input.

If you still need help then please update the test case showing us what you have so we can provide more specific answers.

Kevin

thegamechangerpro

This is great! Super helpful!

The only issue I am running into now is that the search bar doesn't find the updated cells. It sorts just fine, but no search ability.

Is this because I don't have an invalidation included? As I am sure you can tell an invalidate will undo the cell change.

https://jsfiddle.net/thegamechangerpro/9fnw6xu7/46/

kthorngren

Use this to set the cell data:

table.cell( cell ).data( value ).draw();

For example:
https://jsfiddle.net/wd9ct3km/

I'm not sure what the first column is. It doesn't seem to work for searching. Maybe its turned off but your test case is confusing with the column reordering. Change the first name and you will see that it works.

Kevin

thegamechangerpro

That's it!!! Amazing.

Thank you so very much Kevin!!!!!!!!!!

thegamechangerpro

Oh Man! This broke my checkboxes though!!!!

https://jsfiddle.net/thegamechangerpro/guxr65bd/8/

kthorngren

You will want to make the selector for this more specific:

$( '#table' ).on( 'change', 'input', function () {

Maybe something like this:

$( '#table' ).on( 'change', 'input[type="text"]', function () {

https://jsfiddle.net/qtzkwd01/

Kevin