Scrolling to a newly added row after ajax.reload()

mustafamond

I have a datatable with a "New" button to add new records. I would like to scroll to the newly added row and display it after it is added.

A form is generated in a modal and when submitted, the row is added but after the ajax_reload(), no scroll happens. the row is in the reloaded table and if I search for it in the datatable search box, it is a result. If I hardcode the ID of that row for the next time around, after the form is submitted (adding another row), the scrolling to the previously added (id hardcoded into the scroll function) row actually works. It seems that newly added rows are not immediately available after an ajax_reload - maybe it is not completing prior to the scroll? - how can we detect if the ajax call ics omplete before trying to scroll? Or is there another method to scroll I should be using?

Basically, all I want is a newly added row to display in the visible window of the datatable.

Here is some code:

$(document).ready(function() {
     var table = $('#id_author_table').DataTable({
         "scrollY": "200px",
         "scrollCollapse": true,
         "scroller": true,
         "paging": true,
         "createdRow": function( row, data, dataIndex ) {
            $(row).attr('data-popup-view-value', data.type);
            $(row).attr('id','id_'+data.type);  //add ID attribute to each row to target for scrolling
         },
         "ajax": {
            "url": "{% url 'datatable_reload' %}",  //backend sends back all rows
            "dataType": "json",
            "cache": false,
            "dataSrc": "data"
         },
         columns: [
                { 'data': 'type' },
                { 'data': 'code' },
                { 'data': 'description' },
            ]
     });
     $("#create-modal").on("submit", "#js-author-type-create-form", function () {
        var item = $("#js-author-type-create-form").find("input[name='type']").val();
        var gotorow = "";

        $("#id_author_table").DataTable().search('');   //clear search
        $("#id_author_table").DataTable().ajax.reload();   //get all rows (including new)
        $('#create-modal').modal("hide"); //hide the modal containing the form
        gotorow = "#id_"+item;   //create id (creates correct ID for newly added row)
        $("#id_author_table").DataTable().row("#id_RTzZZ").scrollTo();   //hardcoded id - THIS WORKS
        return false;
  });

I would appreciate any help with this.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Are you using Editor for this - as it would enable that very efficiently?

Colin

mustafamond

I am using Datatables in a Django application and have worked hard to get nested bootstrap modals functioning correctly. In my case, Datatable is brought up in a bootstrap modal and the edit screen comes up in another modal - this took some fancy CSS z-index trickery to get working and I dread having to dig into Editor to figure that out again. In addition, and the reason I did not use Editor to begin with is all of the Editor examples and documentation are for PHP and .Net and I don't have the time to decipher and convert what they are doing to Django. I see some examples in Django REST framework, but that's a huge extra component and alot of new coding just to get one small thing to work. I am so close in the base Datatables - everything works except scrolling to the newly added row. Any help on this one issue would be appreciated.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

See if either the row().show() or page.jumpToData() plugins will do what you want.

Kevin

mustafamond

I resolved this by just building the table normally through my Django app, wrapping it with the datatables initialization, and then using add.row() to add the new row when the create form is submitted . I use .node() to get a reference to the row and then row(reference_to_row).scrollTo() to jump there. Works like a charm!

It is possible that my original problem was due to the asynchronous nature of ajax and it is possible that the new row was simply not yet available so it had nowhere to scroll - just a guess...