Responsive datatable

AlexanderLamas

Hi all,

Is it possible to make a dataTable fully responsive?

These are the settings I'm using at the moment, but, I still can not make it responsive.

let table = $("#tblIndex").DataTable({
                    autoWidth: false,
                    processing: true,
                    deferRender: true,
                    scrollY: tableHeight,
                    scrollCollapse: true,
                    responsive: true,
                    paging: false,
                    dom: "<'row'<'col-sm-5'B><'col-sm-7'f>><'row'<'col'tr>><'row'<'col-sm-7'p>>"
...
...
...

These are the js references used

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>    
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Can anyone point me what is wrong or what is missing?

Thank you very much!

Regards,
Alex

tangerine

You need to include the Responsive extension.
https://datatables.net/extensions/responsive/

colin

Hi @AlexanderLamas ,

It looks like you're missing the Responsive source files. Take a look at this example - you'll see all the files you need at the bottom on the "Javascript" and "CSS" tabs below the table.

Cheers,

Colin

AlexanderLamas

Hi @tangerine and @colin ,

Thank you very much for your reply.

I understood how it works based on the examples you guys sent me.

But, I'm still having trouble to make fully responsive as I have my dataTable inside of a container, and its surrounded by the header, a div on the left hand side (nav bar), and the footer at the bottom.

Is there any class I have to use or suppress to make it responsive in this scenario?

Thank you very much!

Regards,
Alex

colin

Hi @AlexanderLamas ,

It should work as advertised. The best way to move this forward is if you could create a test case or link to your page. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

AlexanderLamas

Hi @colin ,

Thanks for your reply.

Here is the test case, http://live.datatables.net/pozasese/1/

My intention is just to show the dataTable within its container, but always showing the page header and footer without having to scroll.

The dataTable itself can be scroll-able if the number of items can not fit within the space. And on top of that I'm trying to make it responsive according to the resolution I'm using or according to the browser size.

Thank you very much for your help.

Regards,
Alex

allan

Have a look at this blog post which introduces a plug-in which will do most of what you want. You just need to define the container that the DataTable will go inside.

Allan

AlexanderLamas

Hi @allan ,

Thank you very much for your reply and sorry for my very late reply.

The samples in the blog post are very good and they are exactly what I'm looking for.

Is there a way that I can take a look in the full code for this sample:

https://datatables.net/media/blog/2017-12-31/dynamic.html

It would be nice if I could see the full implementation of it, with the dataTable getting the data, and the resizing code in place as well.

Thank you very much in advance.

Regards,
Alex

colin

Hi @AlexanderLamas ,

You can see the full source by right-clicking on the page and selecting "view page source" - it's only brief.

Cheers,

Colin

AlexanderLamas

Hi @colin ,

I've got the code used in that sample, even though I was not able to achieve what I wanted.

The sample work well when there is only the table in a page, which is not exactly my case.

I will try a different approach.
Is it possible to have a vertical scroll when you are also showing the page length?

Thank you very much!

Regards
Alex

colin

Hi @AlexanderLamas ,

Yep, see this example here - scrollResize and paging

Cheers,

Colin

AlexanderLamas

Hi @colin ,

Thank you very much for your quick reply.

I understood the sample you sent me, but, its not really working for my case scenario.

I was trying to keep the table as usual, without putting it inside of any container, just inside of the "body" tag as my style.css is managing the looking and feel the way I want it.

The problem is, in some pages I have a table the vertical scroll, in some pages I have some inputs before the table, it can vary, which means the table height will change according to each page.

Because of that I have to keep setting "scrollY" differently for every single page and resolution, and on top of that, keep refreshing to make the adjustments.
That's quite a bit of work and not really maintainable.

I've noticed that when you are using paging (table length) the table is fully responsive and automatically, I don't have to set anything else. I was just trying to keep that and add the vertical scroll in some tables without having to wrap my table in any special container.

If you think is possible to achieve what I want without wrapping anything please let me know.

Sorry for the lengthy text.

Thank you very much!

Regards,
Alex

allan

Without doing the calculations yourself, I don't think it would be possible without a container. We use the container to effectually allow you to define the height that the DataTable can take up (be it by absolute positioning, flexbox or anything else), and it can then perform its calculations based on that height available. The key is knowing what is available.

If you can give me a link to your page I'll take a look and see what I can think of.

Allan

AlexanderLamas

Hi @allan ,

Thank you very much for your reply.
I really appreciate your efforts on trying to help me.

Unfortunately, the application we built is available only inside of a portal, so, not much chance on give you access, sorry. It would be nice though!

I think in this case is better keep the table as it is, using its API to keep responsive without adding an extra feature. It also good to keep a standard across the whole app. But, the main reason is to keep it simple, responsive and with a maintainable code.

Thinking of a container, its hard to please everyone as we don't know the different monitors out there and the different possible resolutions our customers would be using in their devices. Better do not try to predict.

In the application we built, we are just making sure everything shows nicely at a minimum resolution, and we decided for 1024x768.

Thank you very much!

Regards,
Alex