Get the current index of the currently selected row

mattsmall1972

I need to find the current index of the currently selected row (there is exactly one). The rows may be resorted or have search applied to them. I have tried numerous things and nothing seems to work holistically across all of the various search/reordering permutations.

$('#Table').DataTable().row('.selected', { order: 'current', search: 'applied' }).index

allan

table.row({selected: true}).index();

should do it.

Allan

mattsmall1972

Hi Allan - thanks for the answer, but it doesn't work. Let me give more context:

I have a table where each row has a RowId that corresponds to its initial state index. That is, when the table is rendered, RowId = 4 if the row's index is 4 when the table is initially created.

I am doing some javascript on the selected row (the highlighted row) when it is highlighted, and again when it is deselected.

My search code works great when the order has never changed. However, when a search occurs or a column is sorted, then the displayed rows change their order. However, the index of the selected row doesn't change, even if it's not currently accurate.

For example. let's say I have a row that has an index of 5 in its initial state and also has a RowId of 5. If I do a search on that row and it becomes the only displayed row, the RowId is still 5, and the displayed index should now go to 0. However, it's still returning that 5 is the index because it hid the rows.

How can I get the actual current index, only with regards to the displayed rows?

kthorngren

I believe the row().index() is set on the initial data load and doesn't change. See the row().index() docs for details of how it is used.

I'm not sure why you want the row index based on the searched or sorted table but possibly you can use this index example to generate a dynamic index. Use columns.visible to hide the column if you don't want it seen.

EDIT: row().index() won't fetch the dynamic index in the column. You will need to use row().data() or cell().data() to get the value from the index column.

Maybe you can provide more details or code showing why you need the index based on the table search or order results. Possibly we can offer suggestions.

Kevin

mattsmall1972

I'm dynamically adding/removing a row in the Datatable based on the selection. When a row in the datatable is selected, it creates a new row below the selected row and populates it with additional information that is gotten from the server.

In my code, I need the current visual index of the selected row. That tells me where exactly I need to place my new row. It also allows me to dynamically remove the new row when the selection changes or is deselected.

As I said, that all works great until reordering or search occurs. Despite claims to the contrary, I cannot find any code which gives me the visually displayed index of the table as it is shown on the screen.

Here is code that I made based on this blog post:
https://northcoder.com/post/row-indexes-vs-display-positions-in/

 function findRows(s, col) 
 {
     var T = $('#EventsTable').DataTable();
     console.log("findRows: Searching for " + s);
     var C = T.column(col, { order: 'current' }).data().indexOf(s);
     console.log("findRows: found at " + C);
     return C;
}

In the below image, I have a row selected after a search for it's content. This row has the RowId of 11 because that's its original index + 2 (In javascript the datatable has 2 rows above the data). I need to find the actual displayed index of that row in the Datatable (it should be 0). However, the code returns 9 (9+2 = 11).

When I try to put a new row into the table using javascript, the call fails because there is not currently a row 11.

allan

The row().index() method returns the data index. However, you are looking for the display index.

I need the current visual index of the selected row. That tells me where exactly I need to place my new row. It also allows me to dynamically remove the new row when the selection changes or is deselected.

That's going to be a problem in DataTables. The row display index is 100% determined by the ordering applied to the table. If you want row B to appear after row A it must be that way by the ordering of the data. There is no way to tell DataTables that row B must appear after row A other than the data to order.

You cannot use DOM methods to insert rows into a DataTable - DataTables will ignore and overwrite that positioning when it next redraws the table, as you are seeing. Likewise you cannot use a DOM method to remove a row, since on next redraw it might be reinserted.

So if you want a row in a certain position in a DataTable, you need to have its data reflect the position you want, and then make sure the table is ordering by that data point. A sequence number for example might be useful.

Allan

kthorngren

What Allan said

Possibly you are trying to do something like this to insert a tempory row?
https://live.datatables.net/rusiwapo/1/edit

It uses row().node() to get the selected tr. Then uses jQuery methods to insert and remove the tr from the HTML table. Datatables doesn't know anything about this row and it will be removed on any other table draw.

If you want to do something like tis then maybe Child detail rows is a good option.

Kevin

mattsmall1972

@allan You're trying to answer more than I asked. I already have the temporary row working as expected and I am not worried about redraw as the temp row is removed when the selection changes. My root question is: how do I get the display index? Pretend my use case of additional row inserted via DOM doesn't exist: what's the method to get that display index?

@kthorngren The child detail rows is exactly what I wanted to begin with. I couldn't figure that out and there's no "This is how we did it..." for the front page. I'll try this to see if it works as expect.

Thank you both!

mattsmall1972

@kthorngren Child Rows is exactly what I wanted, thank you! It worked so easy and allowed me to remove a bunch of code trying to figure out the display index.