Bring new record into view

cj1005

Hi,

After creating a new record, the record is inserted correctly at the relevant point depending on the order which is great, but I need to move the visible section to the part of the table that contains the new record.

I have it auto-selecting the new row, but is there any way to programmatically bring the new row into view?

Not sure if it makes any difference, but, I'm not using pagination, I use scrollY instead.

Thanks, Chris

kthorngren

Funny a similar question was asked yesterday. See if the linked thread helps.

Kevin

cj1005

Thanks, Kevin.

Unfortunately, that does work for my issue, as the new row will be inserted depending on the current order that is set by the user.

Ideally, I would like to use the 'id' of the new record and scroll to that part of the table, is that possible?

Chris

kthorngren

The jQuery animate() example shown at the end of the thread I linked needs to have the selector changed to the Datatable instead of the page. It does work, see this example:
http://live.datatables.net/qaxewice/1/edit

The JSON data uses the default rowId of DT_RowId. You can set rowId to your id object and it will populate each row's id with that value. Tiger's row id is row_1.

Kevin

cj1005

Almost there Your right it does work for an existing row, but not for a new row.

I get an error '.top() is undefined, I'm assuming this is because the row id is not found on the table yet, any idea how I can delay the scroll till after the redraw? If that is the issue!

Below is the postCreate code I'm using:

colrlist_editor.on('postCreate', function (e, json, data, id) {
  colrlistTable.row('#' + id).select();
  $('.dataTables_scrollBody').animate({scrollTop: $("#"+id).offset().top},300);
});

Thanks, Chris

cj1005

Ignore that last message, I was being dumb, I just needed to call the redraw before the scroll....thank you very much Kevin

cj1005

Hi Kevin,

I'm afraid it is still not quite working, I do not get any errors and the table is scrolling, but it doesn't show the correct row in the view.

I have had a play around to try and work it out and I can see the offset().top part of the code below returns a different value to the offsetTop property of the new row once the table is fully reloaded:

In the code below, I will see a console log showing the offsetTop, which in my last test showed as '22121.828125' but the table scrollHeight is '20349' and also if I look at the new row properties after the table has reloaded the offsetTop is '18149'.

sizelist_editor.on('postCreate', function (e, json, data, id) {
  sizelistTable.row('#' + id).select();
  sizelistTable.draw();
  console.log($("#"+id).offset().top);
  $('.dataTables_scrollBody').animate({scrollTop: $("#"+id).offset().top}, 300);
});

Any ideas?

Cheers, Chris

cj1005

Hi,

An update on the above:

The issue above was because my testing webpage has two datatables and I realised it was picking up the details from the first table, so when I added a row to the second table it was getting the wrong offsetTop. So, I have tested the below on a webpage with a single datatable and it is working

Users_editor.on('postCreate', function (e, json, data, id) {
  UsersTable.row('#' + id).select();
  UsersTable.draw(false);
  var testDiv = document.getElementById(id);
  $('.dataTables_scrollBody').animate({scrollTop: testDiv.offsetTop}, 300);
});

The only issue left is, how do I reference which datatable I'm referring to when there are multiple datatables?

Currently, each row is given an id that matches the record number for that table, so there will be duplicated <tr> id's on the DOM for each table (ie. <tr> 1 on table 1 will have an id of "1" and <tr> 1 on table 2 will have an id of "1"), so I assume I need to work out how to change the <tr> id to contain a unique ref to the relevant table?

Cheers, Chris

cj1005

Hi,
Is it possible to add another class to the scroll body wrapper div, so rather than the class being class="dataTables_scrollBody" it would be class="dataTables_scrollBody Users_scrollBody" ?

Chris

colin

You could add that class manually in initComplete - would that work?

Colin

cj1005

Sorry Colin I've only just seen your suggestion, I did solve my issue earlier by adding the following line directly after the datatable div:

$( userTable.table().container() ).addClass( 'userTable' );

Then, I just use that class in the scrollTo selector $('.dataTables_scrollBody .userTable') now it only scrolls the relevant table