Topic: Datatables show entries dropdown not displaying

cpshart free asked 5 years ago


I am using datatables and mysql, but I am having issues with the show entries dropdown either not displaying at all (Show entries only, no dropdown list of page lengths) or not rendering correctly, so the Show and entries are not on the same line and the rendering is not correct.

I can fix the problem by commenting out mdb.min.css style sheet, but this is obviously not a solution.

I am trying to replicate the format below

I have looked at the code behind this example using the chrome debugger, but I am still getting issues, do you have a link to the above code.

Also the global Search displays an underscore line, rather than a box, as shown in your example.


Many Thanks in advance



NB I have just come across this comment on the same problem with a possible workaround, it would be preferable to avoid using the workaround if possible



cpshart free commented 5 years ago

Does anyone have an idea of a workaround to this problem using mdbootstrap with datatables as the use of datatables is a core and essential element of my web design. The other issue which others have also reported is having to move focus and click away from the page length dropdown list to render the page to the selected length. I should like to stay with mdbootstrap as I am very pleased with the components on offer, but I am concerned that in the absence of a workaround or preferably a fix to the issue I may have to select an alternative UI kit. I look forward to hearing from you soon. Many Thanks Colin

Jarecki free answered 4 years ago

I have the same problem. I have just bought admin template. It all works in my own template but not in MDB

Jarecki free commented 4 years ago

I can see that select plugin makes this problem but I can not locate it to remove. What is its full name?

Magdalena Dembna staff commented 4 years ago

Have you try the @vgaire007 fix with selecting .select-dropdown class?

vgaire007 free answered 5 years ago

I tried this and it worked for me, add this code in the footer section :
$(document).ready(function () {

Jakub Strebeyko staff commented 5 years ago

Hi there, This maybe a temporary must for the ones suffering from the bug. Let us know in case of other ideas, too - they might come helpful to someone in need. Best, Kuba

As I can see it's a bug with our select plugin. I added this issue to our TODO list so our team will resolve the problem in the future. Currently, the only workaround is adding `.browser-default` class to our select

Jakub Strebeyko staff answered 5 years ago

Hi there, Colin, Before the hands get dirty from a debug attempt, let me ask you this: user version indicator suggest you are using MDB jQ version 4; is it correct? Many, many issues, including ones regarding tables and search boxes, have been addressed in the 4.5 release. If an update is an option for you, please try downloading the newest package and let us know back, whether the problems persist. With Best Regards, Kuba

cpshart free commented 5 years ago

Hi Jakub Thanks, I will look at installing the latest update and testing the above code, I will update the call once I have a result. Best Regards Colin

cpshart free commented 5 years ago

Hi Jakub I have installed the latest update MDBPro 4.5.1 1. displaying the page length dropdown list not rendered as per your example in the link above this is still a problem, but I managed to get it working in 4.5.0 in one of my files, I will try and produce a stripped down version 2. Search box is displaying as a form input line as opposed to a closed box as per your example now working: search boxes are now a closed box as opposed to a line, under the search text 3. issue also where you must click away from dropdown to close the dropdown, reported by others on this forum still an issue Thanks Colin

Jakub Strebeyko staff answered 5 years ago

Hi there Colin, Thanks for reaching out! I'm very pleased that you liked MDB. Why don't you share your code sample here (or at jsfiddle / codepen)? That way we can adequately address the concerns, one at the time. With Best Regards, Kuba

cpshart free commented 5 years ago

Hi Jakub Thanks for your quick reply, sorry I did not pick up here is the code which demonstrates the issues 1. displaying the page length dropdown list not rendered as per your example in the link above 2. Search box is displaying as a form input line as opposed to a closed box as per your example 3. issue also where you must click away from dropdown to close the dropdown, reported by others on this forum The effect of the rendering is that the table takes up more screen space than is desirable and does not look professional Here is the code <pre>Start your code here</pre> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="<a href=""&gt" rel="nofollow">"&gt</a>; <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- --> <link rel="stylesheet" type="text/css" href="<a href=""/&gt" rel="nofollow">"/&gt</a>; <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <body class="fixed-sn white-skin"> <!--Main Navigation--> <header> <!-- Sidebar navigation --> <div id="slide-out" class="side-nav sn-bg-4 fixed"> <ul class="custom-scrollbar"> <!-- Logo --> <li class="logo-sn waves-effect"> <div class="text-center"> <a href="#" class="pl-0"><img src="<a href="" rel="nofollow"></a>; class=""></a> </div> </li> <!--/. Logo --> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group md-form mt-0 pt-1 waves-light"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <!-- Simple link --> <li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li> </ul> </li> <!--/. Side navigation links --> </ul> <div class="sidenav-bg mask-strong"></div> </div> <!--/. Sidebar navigation --> </header> <!--Main Navigation--> <body> <!-- Start your project here--> <!--Main layout--> <main> <div class="container-fluid mb-5"> <!--Section: Basic examples--> <section> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <table id="datatables" class="table table-striped table-bordered table-responsive-md" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> </tbody> </table> </div> </div> </div> </div> </section> <!--Section: Basic examples--> </div> </main> <!--Main layout--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <!-- --> <script src="<a href=""></script&gt" rel="nofollow">"></script&gt</a>; <script src="<a href=""></script&gt" rel="nofollow">"></script&gt</a>; <!--Custom scripts--> <script> // SideNav Initialization $(".button-collapse").sideNav(); var container = document.querySelector('.custom-scrollbar'); Ps.initialize(container, { wheelSpeed: 2, wheelPropagation: true, minScrollbarLength: 20 }); $(document).ready(function() { $('#datatables').DataTable(); }); // Material Select Initialization $(document).ready(function () { $('select[name="datatables_length"]').material_select(); }); </script> </body> </html>   I look forward to hearing your response Many Thanks Colin

Bartłomiej Malanowski staff commented 5 years ago

I'm browsing your code and I see you use `` tag twice. Why did you do that?

cpshart free commented 5 years ago

Hi Bartłomiej Thanks for your comment, you stated that I tag twice and why ?, I have a start and end tag as per normal practice , I don't understand your comment, can you clarify please by extracting an example from my code so I can respond, thanks. Cheers Colin

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes