columns().nodes() deferRender or highlight column workaround

columns().nodes() deferRender or highlight column workaround

kzippkzipp Posts: 4Questions: 2Answers: 1

I received a request to add a way to highlight a column if there is input in the search field. This is especially useful with stateSave: True. This way if a user searches for a First Name, goes to a different page, then comes back the First name is still there AND the column is highlighted to remind the user they have text in the searchbox. It doesn't make sense to only do this on a page load, so I would also like to do this as a user enters text into a searchbox.

I have successfully done this using the code $( table.column( [i] ).nodes() ).addClass( 'highlight' ); in fnInitComplete as well as on keyupchange in the column search.

Everything works great with defaultRender off, but as soon as I turn it on it obviously only focuses on what is visible. I completely understand why, so wondering if anyone has experienced this before and if I can get around this something with keeping DefaultRender on.

Ideally I can figure out a way to highlight the entire column instead of each node. Possibly highlighting the entire column using nth-child? I know that isn't the most ideal solution, so wondering if anyone has any other ideas to always keep a class on column or a td within a column if text is found in the column input area.

Answers

  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin

    What you would need to do is also add a callback for the createdRow callback and keep track of what columns should be highlighted. That way, as the rows are created, when they are needed, they can be highlighted.

    This is currently the only way of performing this action. On the plus side, when implemented, the users will never notice anything different - it will "just wok" from their point of view!

    Allan

  • kzippkzipp Posts: 4Questions: 2Answers: 1

    Hey Allan.

    Thanks so much, this is definitely what I was looking for. I am almost satisfied, but still have a question about this.

    Is there any way I can grab the column count from here?

    I have something like:

    "createdRow": function( row, data, dataIndex) {
        for (var i = 0; i <= 9; i++) {
            if($("#example1 tfoot th input")[i].value != ""){
                $( table.column( [i] ).nodes() ).addClass( 'highlight' );
            }
        }
    },
    

    It is running perfect. But I am running the table on multiple pages I want to keep it as scalable as possible.

  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin

    I would suggest using columns().every() then you don't need to keep or get the count. However, if you did: table.columns().count() will do it.

    Allan

This discussion has been closed.