2

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.

Ranoy
  • 98
  • 2
  • 4
  • 17
  • 1
    Fiddle works as expected by me , only body scrolls not header. https://jsfiddle.net/jqv1bmj8/ – Ranoy May 04 '16 at 07: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 footer – davidkonrad May 04 '16 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 May 04 '16 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
    wrappers.
     – davidkonrad May 04 '16 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
    . 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
    . We can do this by changing the scrollLeft of header but I dont see it happening in header wrapper css.
     – Ranoy May 05 '16 at 17:29

2 Answers2

1

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/

Jamess
  • 11
  • 1
0

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.

tmndungu
  • 320
  • 4
  • 17