jQuery datatables and jScrollPane - table header doesn't scroll

Question

I tried to have jquery datatables and jScrollpane work together, it went well but one thing..

when I scroll the table to the right, the header doesn't seem to get along.

here's my code snippet on my html:

$("#my-table").dataTables({
    // ...
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "fnDrawCallback": function(){
        $('.dataTables_scrollBody').jScrollPane();
    }
});

does anyone have an idea?

any help would be appreciated :)

thanks..

score 1 · Answer 1 · answered Jun 11 '12 at 08:38

This answer is already a bit old, but I just had the same problem. I solved it using the jScrollPane events that are fired. When the table body scrolls, this event is noticed and the table header is manually set to the correct position.

$('table.selection_list').dataTable({
  sScrollY: '300px',
  sScrollX: '100%',
  sScrollXInner: '320%',
  bPaginate: false,
  bInfo: false,
  bFilter: false,
  "fnInitComplete": function() {
    var table_header,
      _this = this;
    table_header = $('.dataTables_scrollHeadInner').css('position', 'relative');
    $('body.admin.selections_index').find('.dataTables_scrollBody').bind('jsp-scroll-x', function(event, scrollPositionX, isAtLeft, isAtRight) {
     table_header.css('right', scrollPositionX);
    }).jScrollPane();
  }
});

score 1 · Answer 2 · answered Jul 12 '13 at 09:10

I am using bScrollInfinite and changed little bit your code:

    fnDrawCallback: function() {
            table_header = $('.dataTables_scrollHeadInner').css('position', 'relative');
            $('body').find('.dataTables_scrollBody').bind('jsp-scroll-y',
            function(event, scrollPositionY, isAtTop, isAtBottom) {
                table_header.css('bottom', scrollPositionY);
            }).jScrollPane({
                verticalDragMinHeight: 15,
                verticalDragMaxHeight: 15,
                autoReinitialise: true
            });
        }

But dont know how to tell the table, that I am on the end of table and want to load another data set:(

jQuery datatables and jScrollPane - table header doesn't scroll

2 Answers2