How to get row index of recently added row

edm61

I'm converting an existing table to one using datatables. The existing table is dynamically built by calling a custom backend, building each row in html, and jquery append to the tbody element. I them render a datatable from the DOM using object mapping:

usrTable =  $('#selector').DataTable( {
            columns: [
                { data: 'name' },           // Names of columns for future use
                { data: 'email' },,
                ......}
                ],
            ...
            });

Each row in the DOM also has a <tr id="dbkey')> which gets nicely mapped into the datatables rowId.

Later when a record is added, I push it to the backend, and add a row using:

usrTable.row.add ( {
       'id': '_dbkey',
       'name':  'some string',
       'email':   'some string',
       ........
      });

This is all working fine.

However if I try to get the row index of a row using usrTable.row('#_dbkey').index() it works on any row except for the added one. If I rebuild the table from scratch by fetching the data (including the added row), creating the table in the DOM, and then creating the datatable from the DOM, all works well.

Any idea why I can't get the the index of a row that was added after the datatable was created? head-scratching

kthorngren

Try this:

var newRow = usrTable.row.add ( {
       'id': '_dbkey',
       'name':  'some string',
       'email':   'some string',
       ........
      });

newRowIndex = newRow.index();

newRow will contain an API instance of the new row which you can then get the index or use other row API methods.

Kevin

edm61

Thanks for the suggestion. I tried this at one point and discovered that newRow only referred to the row that was added, not an instance of the original table with the addition of newRow.

The issue for me is that the addition of a row and where I need to figure out the index of a row aren't closely related. I use row.add to create a whole record where my need for the row index is to change one cell in an existing record. It would be ugly to have to search the original instance (from the DOM) and all the instances created by row.add to find the right api instance.

Some further experiments only add to the mystery:

console.log("Before - usrTable has: " + usrTable.data().length);
var newRow = usrTable.row.add ( { .......
console.log("After - usrTable has: " + usrTable.data().length);

Of course, after = before+1 which is what I would expect. Is there something else I have to do to merge the api instances allowing me to access and added rows using the original API instance (usrTable)?

Note: I could just blow away the whole DOM table and datatable and reconstruct it on an add (yuk) only because the dataset is smallish at the moment.

edm61

At the end of the day, when a user wants to change a record, they eventually submit a "edit record" form, I'm trying to update the datatable by doing something like this very abbreviated code:

var userId = button.getAttribute('data-user-id');  // Extract Id from the button attribute
var newEmail = $('#modalEmailSelector').val();   // Extract the new email
var row = $('#'+userId);                                        // Get jQuery Id of the row
usertable.cell(row,1).data(newEmail);                   // e-mail is index 1

kthorngren

Sorry but I'm not clear exactly what of how all the above ties together. I worked up a quick example after reading your 2nd to last post:
http://live.datatables.net/lunoyidu/1/edit

Maybe it will help or maybe its not close to what you are looking for. It would seem that code in your last post would work. Maybe you can work up an example if you are still having issues.

Kevin

edm61

With some Chrome sleuthing I figured out that the <tr> id was not getting set on the rows that were added. The ones from the DOM were fine. So the rowSelect argument to cell() was bogus. That's where things went sideways.

I finally bit the bullet and eliminated the DOM table build and let datatables do all the work. That's when it became apparent I needed to map the rowId to the right field delivered from the backend and that had to be in the object passed to row.add as well.

All is good. Thanks for the help! Your example reinforced what I found out the hard way.