How to Scroll a table to a specific cell. (using datatables jquery plugin along with fixed columns)

Question

I have a table in which I am using datatables jQuery plugin with fixed columns add on for fixed column and fixed row.

Plugin is working fine for me. Now I want to scroll to a specific cell on table load. I have an id of the cell.

I tried following:

$(document).ready(function () {
    var oTable = $('#masterGridTable').dataTable({
        "sScrollY": "255px",
        "sScrollX": "100%",
        "sScrollXInner": "150%",
        "bScrollCollapse": false,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
        "fnInitComplete": function (oSettings, json) {

        }
    });
    new FixedColumns(oTable);
    var scrollToView = document.getElementById('selectedElementId');
    if (scrollToView)
        scrollToView.scrollIntoView(true);
});

It works but the problem it that scrollIntoView method doesn't scroll the cell in middle of the screen.

I also tried using a jQuery scroll plugin.

This works fine if i use it without datatables, but both doesn't work at the same time.

Any ideas?

Ravi Krishan · Accepted Answer · 2013-09-13 11:07:46Z

solved it. Here is my solution. I used jquery scrollTo plugin to scroll through the table.

$(document).ready(function() {
             //var selectedElementId = 'selectedElementId';
            var oTable = $('#masterGridTable').dataTable( {
                "sScrollY": "255px",
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bScrollCollapse": false,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "bStateSave": true,
                "fnInitComplete": function (oSettings, json) {
                    var elementV = '{!selectedElementId}';
                    if(elementV!= null && elementV.trim()!= ''){
                        elementV = elementV.split(':').join('\\:');
                        $('.dataTables_scrollBody').scrollTo('.'+elementV,2000,{offset: {top:0, left:-130} });
                    }
                }
            } );
            new FixedColumns( oTable ); 
            var scrollToView = document.getElementById('{!selectedElementId}');  
            if(scrollToView)
            scrollToView .scrollIntoView(true);

        } );

Previously i was trying to scroll using Id of Table. But when Datatables plugin works it breakes the table into different parts, fixed header, fixed column and table body in different div So i used 'datatables_scrollBody' in scrollTo plugin and class of the cell to scroll. and offset for top is 0 and for left is -130 this is width of first fixed column which we need to subtract from total width of table. Hope it helps for someone. :)

Collectives™ on Stack Overflow

How to Scroll a table to a specific cell. (using datatables jquery plugin along with fixed columns)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related