3

I'm using Yajra datatable from a weblesson tutorial.

All is working great, but the data-table is NOT responsive.

I included this code :

$('#user_table').DataTable({
  responsive: true,

Thanks to Omer :

I added two CDN :

  <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
  <link rel="https://cdn.datatables.net/rowgroup/1.1.1/css/rowGroup.bootstrap4.min.css" />

and I REMOVE this :

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />

All is working great now.

Like you can on this photo, my table is responsive :

enter image description here

EDIT :

Thanks to Omer :

I added two CDN :

  <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
  <link rel="https://cdn.datatables.net/rowgroup/1.1.1/css/rowGroup.bootstrap4.min.css" />

and I REMOVE this :

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />

All is working great now.

Thank you.

David
  • 427
  • 1
  • 5
  • 21
  • 1
    in https://datatables.net/extensions/responsive/examples/ url you will see other examples. What do you want exactly? – Omer YILMAZ May 03 '20 at 14:23
  • 1
    You probably want to this: https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html – Omer YILMAZ May 03 '20 at 14:37

2 Answers2

4

Bootstrap table-responsive add overflow-x: auto style at your tag. So bootstrap responsive is working on your site. If you want to datatable responsive, you must add the extension: https://datatables.net/extensions/responsive

Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.

Omer YILMAZ
  • 1,234
  • 1
  • 7
  • 15
  • Hi, Thank you. I was reading your link's page when you replied. Indeed, I have to install the responsive files (CSS and JS). I did it and that's better, THANK YOU. I still have a problem, the display is not correct, I edit my original post to show. Thank you agian. – David May 03 '20 at 14:09
  • I did one minute ago – David May 03 '20 at 14:26
0

I copied and pasted your code as is in a new file, opened it and tested it : no problem

enter image description here

Now it is too easy to tell you it works, the problem is on your side...

So i did a few tests :

  1. Firefox 75 => OK
  2. Edge 81.0.416.68 => OK
  3. Even IE 11.778.18362.0

Seems to me that this has to be more of a browser-side issue (cache, browser-extensions blocking JS or CSS properties...)

Maybe try on another browser (a portable one to avoid stacking on your machine...)

But this probably has nothing to do stackoverflow as this isn't provoked by code or code misunderstanding.

z4nzi
  • 71
  • 1
  • 2
  • 7