Redrawing and responsive does not happen with ajax-loaded data. Why?
Redrawing and responsive does not happen with ajax-loaded data. Why?
Daemach
Posts: 9Questions: 2Answers: 0
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
This discussion has been closed.
Answers
Responsive doesn't work in either of those, both have
responsiveset tofalse,Colin
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
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.
Setting responsive to true has no effect.
I may be missing something but it seems to update for me:
Likely you will need to remove the BS responsive (class
table-responsive) from the table and addstyle="width:100%"as shown in this example for Datatables responsive to work.Kevin
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.
Its being added with your
domoption 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
domoption is creating adivaround the table with the callstable-responsive. You are not enabling Datatables responsive mode.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
You're right. I removed that, set responsive to true and no change. This video is the best way to test it.
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
Doesn't look like you added
style="width:100%"to thetabletag. 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
I missed that. And style="width:100%" seems to have fixed it. Thank you for your patience and help!