Friday, 5 July 2013

Horizontal scrollbars at top & bottom in Datatables

In my data table I have a lot of data so horizontal scroll is required. I found library jQuery-doubleScroll but it doesn't work with DatTables. Reason is that DatTables adds some parent divs to the original table. Solution is to wrap table with own div and use it for double scroll. Here is short example:

 
$('#product-table').dataTable({
   "sPaginationType": "full_numbers",
   "aaSorting": [],
   "bPaginate": false,
   "bScrollCollapse": true,

});

$('#product-table').wrap("
"); $('#scrooll_div').doubleScroll();

 

5 comments:

  1. Hi Sergey!

    I tried your method with Datatables, but if i use a text inside the "td" tags, there's no problem and the double scrollbar appears (http://cl.ly/image/2K232023111H/text.png).
    But if i try to use an external data, stored in a database (mysql) with "sAjaxSource" inside the Datatables's script the scrollbar at the top of the table doesn't appear nay appear only the background of the scrollbar(http://cl.ly/image/2O2f2F0A043q/externalData.png).
    While all data of the table and the scrollbar on the bottom are displayed well.

    How you can i fix it?
    Thanks!
    Marco

    ReplyDelete
  2. Try this:
    $('body').find('.dataTables_scrollBody').wrap('');
    $('#scroll_div').doubleScroll();

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

    ReplyDelete
  3. Hi,
    Your solution does not work properly with DataTables 1.10.13
    It scrolls only the body of the table without the header.
    You may have an idea how to solve this?
    Regards
    Jack

    ReplyDelete