Redrawing and responsive does not happen with ajax-loaded data. Why?

Daemach

When I load a table using HTML, it redraws and responsives automatically whenever the window changes. If I comment out the HTML data and add the ajax options to the table initialization, (which pulls the data from the server instead), it no longer redraws or handles responsive changes automatically.

Is there another option I'm missing? The only difference is where the data comes from.

Test cases:

https://ipcd.synaptrix.com/test/ajax
https://ipcd.synaptrix.com/test/html

colin

Responsive doesn't work in either of those, both have responsive set to false,

Colin

kthorngren

Yep, it looks like you are using Bootstrap Responsive instead with the class table-responsive. The BS responsive seems to be working (scrollbar) on both tables. They behave a bit differently but since its a Bootstrap product you may have better luck checking with their support resources, Stack Overflow maybe?

Kevin

Daemach

In both of those, resize the window either by dragging the edge of the browser or using the flyout menu in the top left. The html version redraws the table, the ajax version doesn't.

Daemach

Setting responsive to true has no effect.

kthorngren

The html version redraws the table, the ajax version doesn't.

I may be missing something but it seems to update for me:

Setting responsive to true has no effect.

Likely you will need to remove the BS responsive (class table-responsive) from the table and add style="width:100%" as shown in this example for Datatables responsive to work.

Kevin

Daemach

Below is my table tag. I think that responsive is adding that class. And it works properly in the html version. The table you screenshotted does not change size if you actively drag the browser window. The html version does.

<table id="dataTable" class="table table-sm mb-0 table-striped table-dashboard fs--1 border-bottom border-200">

kthorngren

Below is my table tag. I think that responsive is adding that class.

Its being added with your dom option config:

dom: "<'row mx-1'<'col-sm-12 col-md-6 px-3'l><'col-sm-12 col-md-6 px-3'f>>" + "<'table-responsive'tr>" + "<'row mx-1 align-items-center justify-content-center justify-content-md-between'<'col-auto mb-2 mb-sm-0'i><'col-auto'p>>",

You can inspect the page and see that the dom option is creating a div around the table with the calls table-responsive. You are not enabling Datatables responsive mode.

The table you screenshotted does not change size if you actively drag the browser window.

Again I might not understand the problem but this video shows it actively resizing while changing the browser size. However this is still the Bootstrap responsive mode. If its not working for you then start with the Bootstrap support to find out why its not working. If they have questions or suggest changes with Datatables then post back here with the response.

Kevin

Daemach

You're right. I removed that, set responsive to true and no change. This video is the best way to test it.

Daemach

I updated the test cases, removing table-responsive and setting the responsive option to true. Now the HTML version doesn't work either. Re-adding the table-responsive class and setting responsive = false makes the html version work as in the video I sent, but there is no change in the ajax version. It does not redraw/scale automatically.

Working html: https://ipcd.synaptrix.com/test/html
Broken html: https://ipcd.synaptrix.com/test/htmlBroken
Original broken ajax: https://ipcd.synaptrix.com/test/ajax
Still broken ajax: https://ipcd.synaptrix.com/test/ajaxBroken

kthorngren

Doesn't look like you added style="width:100%" to the table tag. Datatables uses this to help determine the width.

The video example you posted is not of the same test case we are looking at. The behavior doesn't seem to have the Bootstrap Responsive table enabled either. Did you look at the example I posted above regarding setting style="width:100%"?

Kevin

Daemach

I missed that. And style="width:100%" seems to have fixed it. Thank you for your patience and help!