Bring new record into view
Bring new record into view
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
This question has an accepted answers - jump to answer
Answers
Funny a similar question was asked yesterday. See if the linked thread helps.
Kevin
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
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
ofDT_RowId
. You can setrowId
to yourid
object and it will populate each row's id with that value. Tiger's row id isrow_1
.Kevin
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:
Thanks, Chris
Ignore that last message, I was being dumb, I just needed to call the redraw before the scroll....thank you very much Kevin
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'.
Any ideas?
Cheers, Chris
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
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
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 beclass="dataTables_scrollBody Users_scrollBody"
?Chris
You could add that class manually in
initComplete
- would that work?Colin
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:
Then, I just use that class in the scrollTo selector $('.dataTables_scrollBody .userTable') now it only scrolls the relevant table