I am looking for data-table html structure with fixed header, horizontal and vertical scrolling. I am working on a already developed datatable widget . I found this example https://datatables.net/examples/basic_init/scroll_xy.html where html structure is similar to what I have in my widget. I want to ask in the above example how header scrolls even though the scroll is on body of table .If it is being done by JavaScript still none of the header css properties change when we scroll it horizontally.
5
-
1Fiddle works as expected by me , only body scrolls not header. jsfiddle.net/jqv1bmj8Ranoy– Ranoy2016-05-04 07:44:24 +00:00Commented May 4, 2016 at 7:44
-
What prevents you from investigating this yourself? The table is divided into up to three different tables - one for the header, one for the body, one for a footerdavidkonrad– davidkonrad2016-05-04 13:16:16 +00:00Commented May 4, 2016 at 13:16
-
Yes indeed it is , I have tried but was not able to find it.May be it is something very simple which I am missing . Scroll is only on body part , but with it header also scrolls .Ranoy– Ranoy2016-05-04 16:23:50 +00:00Commented May 4, 2016 at 16:23
-
I honestly not fully understand your problem, sry for that - but if you wonder what happens, then dataTables hides the original table and injects the new ones instead, into different <div> wrappers.davidkonrad– davidkonrad2016-05-04 16:40:17 +00:00Commented May 4, 2016 at 16:40
-
Hi David, sorry for not being clear and thanks for replying. Only part I am interested in is their implementation of horizontal scrollbars with fixed header.As you said that body and header are wrapped in their own <div>. If you look at the final html in the datatable link that I have provided , horizontal scrollbar is only on "body" wrapper .So when we scroll only body part of table should move , but it is moving header also which it should not since it is a different sibling wrapper <div>. We can do this by changing the scrollLeft of header but I dont see it happening in header wrapper css.Ranoy– Ranoy2016-05-05 17:29:07 +00:00Commented May 5, 2016 at 17:29
Add a comment
|
2 Answers
Add this script to call your table id
$(document).ready(function () {
$('#tableid').DataTable({
"scrollX": true,
"scrollY": 300,
"paging": false,
});
$('.dataTables_length').addClass('bs-select');
});
for more information: https://mdbootstrap.com/docs/jquery/tables/scroll/
Comments
My experience is if you use the example above exactly as it is, ie the same table class, it should work but the moment you introduce other bootstrap classes, maybe you want to add data export to excel feature to the table, things get complicated. A 'one fits all' solution is hard to find, your solution depends on the additional classes/CSS.
