DataTables and mdbootstrap.com creates bugs

DataTables and mdbootstrap.com creates bugs

DmSProjectDmSProject Posts: 3Questions: 1Answers: 0

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

  • DmSProjectDmSProject Posts: 3Questions: 1Answers: 0
    edited November 2017

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • cpshartcpshart Posts: 246Questions: 49Answers: 5

    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

  • DmSProjectDmSProject Posts: 3Questions: 1Answers: 0

    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:

    opOrderTable = $('#operator_order_table').DataTable( {
                    dom: 'B<"top"lf>rt<"bottom"ip><"clear">',
                    buttons: [ 'copy', 'csv', 'excel' ],
                    "language": {
                           "lengthMenu": "Display _MENU_"
                         },
                    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                    "lengthChange": true ,
                    "aaSorting": [[3,'asc']] 
    
                } );
                $('[name="operator_order_table_length"]').addClass('browser-default');
    

    I add more things after, but this takes care of the broken select

  • cpshartcpshart Posts: 246Questions: 49Answers: 5

    Hi Dms

    Many thanks for your help all working now

    Cheers

    Colin

This discussion has been closed.