I am using Datatables (Jquery).
Using the code i am getting a horizontal Scroll bar above my footer of the table as in the Link :
"sScrollX": "100%",
"sScrollXInner": "120%",
"bScrollCollapse": true,
Now i want to get another Scroll Bar below the Header also. Help me out.
Add the following code to the Datatable initialization:
"fnInitComplete": function(){
// Enable THEAD scroll bars
$('.dataTables_scrollHead').css('overflow', 'auto');
// Sync THEAD scrolling with TBODY
$('.dataTables_scrollHead').on('scroll', function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
Reference: DataTables plug-in - Display scrollbar below tfoot tag?
jsFiddle: http://jsfiddle.net/3xvpznd3/
For this you have to add another container which has a fixed width like 1000px with overflow auto. And if the content overflows by 1000px then you will able to show the scroller in the container
Like:
CSS
.newcontainer{width:1000px;overflow:auto;}
HTML
<div class="newcontainer">
<!-- Your div having the datatable-->
</div>
scrollbar is applied on div.dataTables_scrollBody, and scrollbar always shown in the bottom of the element.A slight update to the above code by Joseph:
When you add a Thead scroll bar and change its position on scroll event, it gets called thousands of times in a minute which will make your browser respond slowly resulting in a slow scrolling X horizontal bar. To avoid this add throttle like shown below which will basically make sure that the function is executed once in 100 milli seconds.
"fnInitComplete": function(){
// Enable THEAD scroll bars
$('.dataTables_scrollHead').css('overflow', 'auto');
// Sync THEAD scrolling with TBODY
$('.dataTables_scrollHead').on('scroll', $.throttle( 100,function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
}));
}
