Insert rows after a specific row

tito23

I'm working on a script that generates datatable with rows that have children rows, with a max of 5 levels
I created it on the the server side but the page was too slow, so i'm implementing a new approch to show one level with children and if a child has a children, i added an icon and when clicking i'm calling an Ajax to get children, all that is working but my problem when inseting the rows in the datable, it replaced existant ones,
So what i like to do is decaling indexes for all rows after the inserted row index, as described here

"I suspect that you will also need to increment all the indexes after it by one.

This example provides an index column. Maybe it will give you a start for the code you will need to increment the indexes:
https://datatables.net/examples/api/counter_columns.html"

kthorngren

The best way to receive help with this is to build a simple test case, using https://live.datatables.net/ or https://jsfiddle.net/ , that has an example of your data. Tell us how to determine which row the new row is to be inserted after. This way we can provide more specific help.

EDIT: The index example will likely need to be changed. I would conside moving it into initComplete to set the index on initialization. When the new row is to be inserted a function will need to determine the index to insert the row after. Assign that index plus one and increment the remaining indexes. Many ways this can be done.

Kevin

tito23

I tried with this code to insert a row after a given index
table.row(index).child(item).draw();
And i tried with this
table.row(index).data(item);
It inserted the item to the specificed index but the old one is deleted,
Is there an example to do this " increment all the indexes after it by one"
And if i should add a hidden column for indexes and sort the table by it.

kthorngren

table.row(index).data(item);

This will update the row with the item variable. To add a row use row.add().

How are you getting the index value? This may or may not be what you expect. See this section of the row-selector docs. The row().index() is based on the initial unsorted order of the Datatable data. The index does not change when the table order is changed.

I put together this example based on what I suggested above:
https://live.datatables.net/veyeduza/1/edit

Click the button to see the new row added after Ashton cox. It uses columns.visible to hide the generated index column. Comment out the visible: false, option to see how the indexes behave.

It uses oderFixed to make sure the generated index column is always sorted first. I moved the code, with some changes, from the index example into initComplete to set the initial generated indexes.

First it finds the row to insert after using row().data() with the row-selector as a function and gets the index value. It increments this to define the index to insert the new row. It reuses the code from the index example to increment the generated index if it >= to the insert index. Finally row.add() is used to add the new row with the insert index.

I'm pretty sure you will need to make adjustments to apply to your solution.

Kevin