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();
Hi Sergey!
ReplyDeleteI 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
Try this:
ReplyDelete$('body').find('.dataTables_scrollBody').wrap('');
$('#scroll_div').doubleScroll();
Then ddd CSS:
.dataTables_scrollBody {
overflow-y: visible !important;
overflow-x: initial !important;
}
great post. thanks.
ReplyDeleteok
ReplyDeleteHi,
ReplyDeleteYour 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
Hi there. I struggled with this for a good while, and none of the solutions suggested in various places worked for me. In the end, I couldn't get a scrollbar to display at the top and bottom of DataTables via any method. As a workaround that achieves the same ultimate functionality, I ended up using the FixedHeader extension, specifically following this example: https://datatables.net/extensions/fixedheader/examples/options/scrolling.html If you fix the header and add vertical scrolling, and set the scrollY option to a pixel height that easily fits inside your window height-wise, then the single horizontal scrollbar will always be visible (so you won't need two). I hope this helps someone, as trying to add another scrollbar at the top had me nearly tearing my hair out.
ReplyDelete