DataTables and mdbootstrap.com creates bugs
DataTables and mdbootstrap.com creates bugs
I'm building an admin site for a customer with a lot of data, naturally I'm using datatables since it does exactly what I need.
However, since the site uses the Material Design framework from https://mdbootstrap.com/ I've run into a very annoying bug.
When I activate the "lengthChange": true (or just make a basic initialisation) I only get the text, not the select.
It's visible in the source, but not on the page, just the label text.
I've narrowed it down to a conflict with how select elements are handled in mdbootstrap css. If I remove the mdbootstrap css, all table controls works just fine, except that the whole site falls apart
First I'm wondering if anyone else has gotten the same issue, and if so, did you solve it?
If not, I've tried to add my own custom select with the same names/id's wrappers as the generated one, it shows up just fine, but then the table does not pick up the changes.
Appreciate any help/tips.
This question has an accepted answers - jump to answer
Answers
Right, finally found a way, not beautiful, but works for those who have the same issue as I.
After you initialize the DataTable, you can use jquery to add a class to the select based on the generated name of the select:
$('[name="<yourtablenamehere>_length"]').addClass('browser-default');
The class browrser-default belongs to mdbootstrap css and tells the javascript plugin to ignore this element when tearing down and rebuilding form elements to the Material Design style.
Interesting - thanks for posting back on this. MD Bootstrap is probably the next contender for styling integration with DataTables, so I'll be coming back to this myself.
Allan
Hi DmSProject
I am experiencing the same issue as yourself using mdbootstrap datatables and mysql. I have tried implementing your change by adding
$('[name="datatables_length"]').addClass('browser-default');
where my table declaration is as follows
<
table id="datatables" class="table table-sm table-striped table-bordered table-responsive-md" cellspacing="0" width="100%">
Can you expand on where your code is added and the initialisation of the datatable as I may not have implemented the change correctly, as I am still experiencing the error.
Apologies as I am a relative newcomer to coding.
Many Thanks in advance
Colin
Sorry, did not see this until today...
Basically you need to initialize your table first with the configurations you want, then you add this class through normal jquery method addClass
Here is one sample from my code:
I add more things after, but this takes care of the broken select
Hi Dms
Many thanks for your help all working now
Cheers
Colin