Datatables show entries dropdown not displaying

Topic: Datatables show entries dropdown not displaying

cpshart free asked 6 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

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

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

Colin

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

https://datatables.net/forums/discussion/46074/datatables-and-mdbootstrap-com-creates-bugs

cpshart free commented 6 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

Please insert min. 15 characters.

Add comment

Jarecki free answered 5 years ago

0 0 Best answer

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 5 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 5 years ago

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

Add comment

vgaire007 free answered 6 years ago

0 0 Best answer

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 staff commented 6 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

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

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

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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 6 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 6 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

Please insert min. 15 characters.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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 6 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>  <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt</a>;  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link rel="stylesheet" type="text/css" href="<a href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/&gt" rel="nofollow">https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/&gt</a>;  <link href="css/style.css" rel="stylesheet"> </head> <body class="fixed-sn white-skin">  <header>  <div id="slide-out" class="side-nav sn-bg-4 fixed"> <ul class="custom-scrollbar">  <li class="logo-sn waves-effect"> <div class="text-center"> <a href="#" class="pl-0"><img src="<a href="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png&quot" rel="nofollow">https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png&quot</a>; class=""></a> </div> </li>   <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>   <li> <ul class="collapsible collapsible-accordion">  <li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li> </ul> </li>  </ul> <div class="sidenav-bg mask-strong"></div> </div>  </header>  <body>   <main> <div class="container-fluid mb-5">  <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>  </div> </main>    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script>  <script src="<a href="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script&gt" rel="nofollow">https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script&gt</a>; <script src="<a href="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script&gt" rel="nofollow">https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script&gt</a>;  <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

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>

<link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt</a>;

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mdb.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="<a href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/&gt" rel="nofollow">https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/&gt</a>;

<link href="css/style.css" rel="stylesheet">
</head>

<header>

<div id="slide-out" class="side-nav sn-bg-4 fixed">
<ul class="custom-scrollbar">

<li class="logo-sn waves-effect">
<div class="text-center">
<a href="#" class="pl-0"><img src="<a href="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png&quot" rel="nofollow">https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png&quot</a>; class=""></a>
</div>
</li>

<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>


<li>
<ul class="collapsible collapsible-accordion">

<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
</ul>
</li>

</ul>
<div class="sidenav-bg mask-strong"></div>
</div>

</header>

<body>

<main>
<div class="container-fluid mb-5">

<section>

<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>

</section>

</div>
</main>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/popper.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.min.js"></script>

<script src="<a href="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script&gt" rel="nofollow">https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script&gt</a>;
<script src="<a href="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script&gt" rel="nofollow">https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script&gt</a>;

<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

Please insert min. 15 characters.

Bartłomiej Malanowski staff commented 6 years ago

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

cpshart free commented 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

cpshart

14Support score
6Questions 6Answers 0Snippets