duplicate scrollbar in the header : datatable and scrollX

gmisterk

Hi all,

I have a datatable with scrollX option so i have a scrollbar in the bottom of my table.
I am looking for a solution to duplicate scrollbar on the top of my table

Anybody have a solution to duplicate this scrollbar on the top ?

colin

Hi @gmisterk ,

This SO thread should help, it's asking the same thing.

Cheers,

Colin

rf1234

@colin
some of those solutions worked for me particularly this one:

$('.dataTables_scrollHead').css({
    'overflow-x':'scroll'
})
.on('scroll', function(e){
    var scrollBody = $(this).parent().find('.dataTables_scrollBody').get(0);
    scrollBody.scrollLeft = this.scrollLeft;
    $(scrollBody).trigger('scroll');
});

The plug ins recommended on SO didn't work at all. I am using Bootstrap 3.

There is only one downside:
In the data tables scroller code I found two scrollTypes: jump and cont(inous). This is gone using the modifications recommended on SO. Only "cont" is left. You can't use the scroller in "jump" mode any longer.

You see this behavior in the SO favorite solutions as well: http://jsfiddle.net/TBnqw/1/

Is there any way to change this?

rf1234

@colin @allan
I had to remove my above solution: The behavior of the header scrollbar was unsatisfactory.

I have seen multiple requests to allow for a second scrollbar. It would be great if you could provide a solution for this.

allan

Scrollbars are provided by the browser / operating system. They are not something we attempt to alter or override, nor I'm afraid, is it on our project list to do so.

I'm not aware of any setting in the browser to allow duplication of scrollbars left/right top/bottom (if anyone has such resources, I'd be interested in reading over them).

You can certainly style scrollbars using CSS though.

Allan

rf1234

Hmmm, I saw a lot of code manipulating the scroll bar in the respective data tables extension ... Anyway, I will try to develop something by myself and will get back with the results some time next year.