top horizontal scrollbar datatable javascript

Question

I have a datatable in my web page. I need to display a horizontal scroll bar on top of the table. I have tried table.wrap('<div style="width:980px; overflow-x:auto;"/>');. It displays horizontal scroll bar at the bottom of the table. How to display scrollbar on top of the data table. Any help?

Answer 1

You find the answer at http://progrnotes.blogspot.com.ee/2013/07/horizontal-scrollbars-at-top-bottom-in-datatables.html: you can do it with the jQuery-doubleScroll plugin (https://github.com/sniku/jQuery-doubleScroll). However, this also is not working with datatable which is loaded by ajax. You need to tweak it a little.

Steps to do are like this:

1. Download and include doubleScroll.

2. Add lines:

   $('body').find('.dataTables_scrollBody').wrap('<div id="scroll_div"></div>');
   $('#scroll_div').doubleScroll();
   

3. Add CSS

   .dataTables_scrollBody {
     overflow-y: visible !important;
     overflow-x: initial !important;
   }
   

   That should do it (DataTables 1.10.7)

EDIT: if you have column filters on top then the above solution needs modifying, otherwise the headers won't scroll:

2. Add lines:

   $('body').find('.dataTables_scroll').wrap('<div id="scroll_div"></div>');
   $('#scroll_div').doubleScroll();
   

3. Add CSS

   .dataTables_scrollBody {
     overflow-y: visible !important;
     overflow-x: initial !important;
   }
   .dataTables_scrollHead {
     overflow: visible !important;
   }