Live Conditional Formatting without updating data set

Live Conditional Formatting without updating data set

thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

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/

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2023

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2023

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    Hi Kevin,
    Thanks for the quick response.

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    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/

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2023 Answer ✓

    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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

    That's it!!! Amazing.

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

  • thegamechangerprothegamechangerpro Posts: 81Questions: 30Answers: 1

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

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

Sign In or Register to comment.