MDB Pro v4 glitches with Jquery Datatables

joshusre asked a year ago

Hi,

I'm using jquery datatables in a project with my mdb templates and I'm having trouble.   The material select drop down prevent the default datatable drop downs from showing and when you add mdb-select to try and fix (including initializing it) you get a mdb drop down but its buggy (stays open after selecting an option).

Is there a possibility that this will be fixed?

Alternatively, is there a way to keep MDB from adjusting my select objects?

Thanks for your help.


Bartłomiej Malanowski commented a year ago

Please show us live demo


joshusre commented a year ago

Are mdb.css / mdb.js accessible via CDN? Or, is there a third party site you know of that would let me upload mdb.css / js and allow me to fulfill your request? Would GIF suffice?


Bartłomiej Malanowski commented a year ago

yes, MDB Free is available via CDN: https://cdnjs.com/libraries/mdbootstrap


joshusre commented a year ago

I'll have this posted soon. Thank you for your patience.


Shane West commented 11 months ago

Has anyone found a fix for this?
If you still need a demo this happens in Chrome (56.0.2924.87) on your demo page:
https://mdbootstrap.com/content/tables/#sorting
Here's a gif of the behavior:
https://imgur.com/CeWSvtp


hello@canberranet.com.au commented 10 months ago

it happens to your demo page:
https://mdbootstrap.com/content/tables/#sorting

After clicking an entry in the show entries drop down, the dropdown closes, but then opens again.

I too would like a fix for this.


Hi there everyone!

I have good news - couple of them, actually. First of, the material select has been improved and so it should cause trouble in data-tables no more. Please update your package to the newest version (4.4.5) for it to reflect the recent developments. That's not all; we actually went further and decided to lean towards flexible development and custom packaging of MDB-based projects. It means that now you can hand-pick MDB utilities that you really need, leaving out the rest, greatly reducing package size. Please refer to out offcial Bootstrap Gulp tutorial. This should be especially helpful when your local environment and/or tools conflict with their MDB counterparts, as seemed to be the case here.

With Best Regards,
Kuba


Hi guys,

First of all - thank you all for taking your time and noticing us about this. Unfortunately, this bug has no fix available instantly. The team will try to solve the problem in the nearest future.

Regards,

Jake


joshusre commented 10 months ago

I always wondered if buying this template was a poor choice on my part. This kind of stuff re-enforces my opinion that it was.


Jakub Strebeyko commented 10 months ago

I am sorry to hear that. We will do our best to "de-inforce" it back, though, so be sure to check out our updates.
Cheers!


Is there any news on this issue

Thanks,

Steffen


ramix answered 6 months ago

I dont see how this is solved, even in the example on this site this problem still accurs


Jakub Strebeyko commented 6 months ago

Hi, which example do you mean?


commented 3 months ago

https://mdbootstrap.com/previews/templates/admin-dashboard/html/tables/datatables.html


commented 3 months ago

This worked for me:

// Bugfix for re-opening of pagelength-dropdown
$('.dataTables_length select').change(function () {
$(this).material_select('destroy');
$(this).unbind('click').click(function () {
$(this).material_select();
});
});


Jakub Strebeyko commented 3 months ago

Thanks for taking time and sharing the hotfix! Surely it will help people out there.


vgaire007 answered 3 months ago

I tried this and it worked for me, add this code in the footer section :

$(document).ready(function () {
    $('.select-dropdown').remove();
    $('.caret').remove();
    $('select[name="datatables_length"]').addClass('browser-default');
});

Jakub Strebeyko commented 3 months ago

Hi,

Removing the .select-dropdown is one way to do it, for sure. All suggestions are welcome!

With Best Regards,
Kuba


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No