Scroll to the row which has been added to the table.

Keith_H

Create Table

        $('#tblMaster').dataTable({
              "autoWidth":false
            , "info":false
            , "JQueryUI":true
            , "Order":[0,'asc']
            , "ordering":true
            , "paging":false
            , "scrollY":"640px"
            , "scroller":true
            , "scrollCollapse":true
        });

        glbMasterTable=$('#tblMaster').DataTable();

Populate via ajax call (Note : this can be either a full load of the table, a refresh of a row or a new row being added).

        var locScrollTop    = $(glbMasterTable.settings()[0].nScrollBody).scrollTop();
        var locCurOrder     = glbMasterTable.order();

        glbMasterTable.row.add([
             locId + locIcon + locIcon1
            ,trim(pData[i].WSLEVEL)
            ,trim(pData[i].WBSMAST_DESC)
        ]);


        // The order is saved and used again if the table is refreshed by the user.
        glbMasterTable.order(locCurOrder[0][0],locCurOrder[0][1]).draw();

        $(glbMasterTable.settings()[0].nScrollBody).scrollTop( locScrollTop );

The code to set the scrollTop works fine when drawing the table after updating, but what I would like to do is after adding a new row, be able to scroll to the table row that has been added.

Thanks.

kthorngren

Sounds like a perfect fit for the row().show() plugin.

Kevin

Keith_H

Does this work for non paginated tables?

This table isn't huge (varies depends on user selection), but when adding a new row it may get inserted of out the view pane.

kthorngren

Does this work for non paginated tables?

Yes.

Here is an example. Click the "Find Quinn":
http://live.datatables.net/hatojihe/3/edit

The click event will first find the row, select it then use a combo of row().show() to find the page the row is on and draw(false) to draw that page.

Kevin

Keith_H

That's great. Thanks for the help.