How to add current index of a row in a createdRow function ?

zvuc

I'm running a site here https://otoge-db.net/maimai/ using datatables.

I'm trying to experiment an entry animation for rows when they are drawn. My idea was that I can add a staggered fade-in effect from top to bottom using CSS animations, and give the staggered delay effect using the row index values in the table. (Higher row index values = higher animation delay time).

I thought this should be easy but it seems like I can't access the row.rowIndex value from within the createdRow function. When I try console.log(row) or console.log($(row)) I get the exact node I need to target, and rowIndex value within it, but when I do console.log(row.rowIndex) I get -1.

Is there something I'm missing here? Or any nice and simple way to get the Index value for each TR when they're drawn is much appreciated.

allan

The issue you are having is that createdRow triggers before the row has been inserted into the table - therefore it has no index at that point.

The rows are inserted into the table when it is "drawn" - draw. The problem you'll have there is that the table and the rows are already shown, so any animation would have the full table flicker first and then animate in.

You could use rowCallback perhaps - that will trigger just before the row is inserted into the table, and does pass in the position. This is the relevant part of the DataTables code.

You could set the properties needed for your animation at that point, and then DataTables will insert the rows into the document almost immediately after.

Allan

zvuc

The rowCallback option was just what I needed. Worked like a charm! Thanks!