Datatables(JQuery plugin) has scrollx option, which when set to true will add scroll bar that will appear at the bottom of your table, is there an option to also display it at the top of your table.

Datatables(JQuery plugin) has scrollx option, which when set to true will add scroll bar that will appear at the bottom of your table, is there an option to also display it at the top of your table.

• javascript
• jquery
• datatables

• it's browserly impossible, unless Google Chrome decide to have a CSS rule and add this feature in... but i don't think it's happening soon @_o – Keo Strife Commented Jun 27, 2014 at 14:01

1 Answer 1

Not quite impossible.

You find the answer at http://progrnotes.blogspot..ee/2013/07/horizontal-scrollbars-at-top-bottom-in-datatables.html: you can do it with the jQuery-doubleScroll plugin (https://github./sniku/jQuery-doubleScroll). However, this 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;
   }