CODEWITHSUNDEEP
javascriptjquerydatatables
Pravin Kumar
Pravin Kumar

Reputation: 693

Additional Scroll Bar Below the Header of JQuery Datatable

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.

Upvotes: 3

Views: 5467

Answers (3)

sophia mary
sophia mary

Reputation: 1

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());
                        }));                    
                    }

Upvotes: 0

Joseph Hou
Joseph Hou

Reputation: 161

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/

Upvotes: 14

Rohan Kumar
Rohan Kumar

Reputation: 40639

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>

Upvotes: 0

Related Questions