Custom horizontal scrollbar

eGz3

I'm trying to get custom looking horizontal scrollbar for jQuery Datatables. Using some information I found so far, I came up with something like this:

$('#table').dataTable({
"bFilter": false,
"bLengthChange": false,
"bInfo": false,
"sPaginationType": "two_button",
"iDisplayLength": 6,

"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,

"fnInitComplete": function() {
var table_header,
_this = this;
table_header = $('.dataTables_scrollHeadInner').css('position',
'relative');
$('body').find('.dataTables_scrollBody').bind('jsp-scroll-x',
function(event, scrollPositionX, isAtLeft, isAtRight) {
table_header.css('right', scrollPositionX);
}).jScrollPane({
verticalDragMinHeight: 8,
verticalDragMaxHeight: 8,
horizontalDragMinWidth: 82,
horizontalDragMaxWidth: 82,
autoReinitialise: true
});
});

It works fine: however, when I resize the window the table header doesn't scale down the same way that the content does (header is wider than content). Is there any way to attach jScrollPane to jQuery Datatables to scroll header and body equally? I mean something like:

$('#blabla').find('.dataTables_scrollBody').jScrollPane();

but for scrollBody AND scrollHead. Or is there any way for initializing scrollable Datatable without division to separate header and body?

Thanks!

eGz3

bump! :)

guys, maybe there's another way to do it, when I initialize datatables it's like:

[code]
$('#blabla').dataTable({
"bFilter": false,
"bLengthChange": false,
"bInfo": false,
"sPaginationType": "two_button",
"iDisplayLength": 6,
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,

"fnInitComplete": function() {
$('#datatableContainer')
.find('.dataTables_scrollHead, .dataTables_scrollBody')
.jScrollPane({
verticalDragMinHeight: 8,
verticalDragMaxHeight: 8,
horizontalDragMinWidth: 82,
horizontalDragMaxWidth: 82,
autoReinitialise: true
});
}
});
[/code]

if I skip the fInitComplete part it works perfectly but the scrollbar is default. The problem with initializing jScrollPane is that Datatable with scroll is divided to scrollbody and header and I just can't add jScrollPane to both and get only one slider on the bottom. S

So, is there any way to make Datatable slide but without division to header and body?