Apply class to specific row

Apply class to specific row

bfarkasbfarkas Posts: 181Questions: 48Answers: 0

I am trying to figure out how to apply a class to a row based on certain text entry. It should always be the first entry in the table if that helps. I was reading through the row and rowselector functions and not really sure how to know its the right row.

Replies

  • kthorngrenkthorngren Posts: 21,445Questions: 26Answers: 4,974

    Sounds like this is for just one row. Its easiest to show a simple example:
    http://live.datatables.net/puzibucu/1/edit

    You can use row(0) which is get the first row in the table regardless of sorting. In the example that is the row with Tiger Nixon. Or you can use a jquery selector like :eq(0) to get the first row in the table based on the sorting.

    Use row().node() to get the row's node which you can then apply the class.

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Thanks, that works nicely.
    I needed it for a few things, but one I don;t think I should use it for is I really want to hide the first row that is preset with data. I believe this would cause issues throughout by doing a hidden class right?
    I want the row to be in the datacache so it can be manipulated but that the enduser never sees or interacts with it. Do you have any good thoughts on approaching it?

  • kthorngrenkthorngren Posts: 21,445Questions: 26Answers: 4,974
    edited September 2020

    Do you have any good thoughts on approaching it?

    Not sure about good thoughts for this but :wink:

    I would look at creating a search plugin to hide the desired row. Updated the example to show a simple plugin that hides a row based on specific data in the row. In this case it hides Ashton Cox.
    http://live.datatables.net/puzibucu/2/edit

    Note that this hidden row is reflected in the info at the bottom of the table.

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0
    edited September 2020

    Yeah I was playing with a similar setup, it actually lends it self perfectly to my setup as I can put a unique and weird value in the row for it to look for and hide.

    It showing up in things like the filter is the issue, end users will be confused where the missing row is. Definitely closer to a better solution than the class hide approach though.

    It’s too bad there’s not a visibility control in the api for rows.

  • kthorngrenkthorngren Posts: 21,445Questions: 26Answers: 4,974
    edited September 2020

    You could use the dom to remove the default info element and create your own custom info element that basically subtracts 1 from all the values. You can add it using this example. Use the draw event to update the info element and use the page.info() API to get the info element data.

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Thanks Kevin, will take a look. I was thinking about something like that before I asked the question as I felt like I must have been overlooking something simple, but this appears to be the best route.

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Hmm, I have this kind of working, but the draw event seems to be inconsistent. Just messing around with functionality, and it only updates the text after I refresh the page accurately.

    var info = p200table.page.info();
        if((info.recordsTotal-1) < 0) {
        $("div.informationBar").html('Blank.');
        }
        if((info.recordsTotal-1) > 0) {
        $("div.informationBar").html('Currently showing page '+(info.recordsTotal-1)+' of '+info.pages+' pages.');
        }
        
        p200table.on( 'draw', function () {
        console.log( 'Redraw occurred at: '+new Date().getTime() );
        $("div.informationBar").html('Currently showing page '+(info.recordsTotal-1)+' of '+info.pages+' pages.');
        } );
    
  • kthorngrenkthorngren Posts: 21,445Questions: 26Answers: 4,974

    I keep forgetting about the infoCallback function. This may work better for you.

    But to answer your question the lines 1 - 7 should be in the draw event so you can get fresh page.info() data.

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Thanks, will take a look, in the above though I had 1-7 outside of the event to handle just page load, then expected 9-12 handle updating when there were draw events. If I moved everything into the draw, a. the numbers were not accurate and b. nothing displayed until there was a draw event.

  • kthorngrenkthorngren Posts: 21,445Questions: 26Answers: 4,974

    You may need to use the page.info() twice. Once after the table initializes and then in the draw. Instead of moving it you can copy it so its in both places.

    Kevin

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    Yup, that did it. It was strange that it was half working without it.
    Thanks!

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    So I have this working both ways now, and ended up going with the infoCallback option as it handles more scenarios well instead of having to manually write all the scenarios. Thanks!

This discussion has been closed.