How to add a new row in datatable and re order the indexes of each row?

Question

I am adding a new row in the datatable and its working correctly, I am ordering the table by a field (which is timestamp) which means the newly created row should have index 0 and the rows should be 1,2,3... however the problem is that the new row is giving -1 when I check its index. So, how can I actually re-order the table when I add a new row so that the newly created row should have index 0?

 var myTable = $('#myTable').DataTable();
                        var rowNode = myTable
                            .row.add([ btnHtml1, btnHtml ])
                            .draw();

when I check the index after it has been added:

rowindex = tr.index();  //this gives -1 for the newly created row

Can anyone suggest why is it giving the wrong index?

UPDATE:

 function myFunction(this_) {
   var tr = $(this_).closest("tr");
   rowindex = tr.index();  //this gives the displayed index of the row, NOT the real index
 }

I call it from the datatable row like this:

<td>
   <button type="button" id="edit_button" onclick='myFunction(this)' name="edit_button">Edit</button>
</td>

Answer 1

I am not able to recreate your problem.

But I am not sure where the tr variable is defined - so, that may be causing an issue.

For a simple test, here is some data:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Row Index</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>0</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>

And here is a test for the data:

<script type="text/javascript">

  $(document).ready(function() {
 
    var table = $('#example').DataTable();

    var rowNode = table.row.add( ['Quinn Flynn', '?'] ).draw();
    console.log(rowNode.index());

  });
</script>

This prints 6 to the browser console - the new row has an index of 6, as expected.

Another way to verify this is to loop through all the rows, showing the index of each one:

<script type="text/javascript">

  $(document).ready(function() {
 
    var table = $('#example').DataTable();

    var rowNode = table.row.add( ['Quinn Flynn', '?'] ).draw();

    table.rows().every( function () {
      console.log(this.index());
    });

  });
</script>

This generates the following output in the browser console:

Here we can see that the row for "Quinn Flynn" has the expected index: 6.

Update

Some additional notes based on comments in the answer:

1. The row index assigned to a row does not change, once it has been assigned, until the row is deleted, or if the data is replaced and refreshed.

2. Index values are assigned based on the order of the data provided to DataTables - so, for example, in my case, the first row in my HTML table is for "Tiger Nixon" - so that is assigned row index 0. The same applies to data provided by a JSON object.

3. The row index is independent of the display order of the row (due to sorting and/or filtering).

4. When you add a new row to DataTables, it is added to the end of the existing rows inside DataTables - and is indexed accordingly. So, my new row is assigned index 6.

It sounds like you want to take the first row as displayed in the table regardless of what its index number is.

There is a shortcut you can use to get that:

console.log(table.row().data());

In my example, this returns an array:

[ "Airi Satou", "4" ]

It works because it uses row() - not rows() and therefore defaults to fetching only one row (the first row!) from the displayed table.

Be aware that if you provide your data as objects, you may not get an array like my example - you may get an object - for example, something like this:

{ "firstName": "Airi Satou", "index": "4" }