Bring new record into view

Bring new record into view

cj1005cj1005 Posts: 142Questions: 45Answers: 1

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

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934

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

    Kevin

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • kthorngrenkthorngren Posts: 21,261Questions: 26Answers: 4,934
    Answer ✓

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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 :smile:

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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 :smile:

Sign In or Register to comment.