select rows not showing select dropdown list in mdb

Topic: select rows not showing select dropdown list in mdb

cpshart free asked 6 years ago

I am integrating some code to mdboostrap to produce a datatables table of data using Mysql, PHP,PDO, but the show rows entries fails to display the dropdown as soon as I include the stylesheet <link href="css/mdb.min.css" rel="stylesheet">. Do I need to add some initialisation code for this functionality to display.

Using the Dev Tools shows that the line causing the error is as follows :-

inherited from mdb.min.css:26

select {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
display: none!important;
}

if I change the above display line in dev tools to display: none;

the dropdown list of rows 10,25,50,100 appears, but on adding the above change to the custom style.css, it does not display the dropdown list of rows.

Also, is it possible to increase the number of rows to say 500, so rows 10,25,50,100,250,500 would suit me better, I cannot see where I would need to make this change.

Note: If I comment out the line <link href="css/mdb.min.css" rel="stylesheet"> the rows dropdown appears, albeit in bootstrap default format, clearly this is not a workable solution as I want/need to use mdbootstrap.

Any help would be much appreciated, as this is an essential part of my coding.

Many Thanks

Colin

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, sorting datatable is still not working in MDB 4.5.0 PRO or which version do you have? Best, Marta

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, could you send me a message to m.szymanska@mdbootstrap.com? I'll send you a file with working sorting table. Best, Marta

tarunkxi free commented 6 years ago

Hi, I have made mdbootstrap datatable, everything working good. but show entries (example_length) not stayable while selected option 10, 25, 50 and 100. How can it resolve it. When i click the above option the select-dropdown didn't hide automatically.

Add comment

cpshart free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

I now have it working the show entries for rows of the dropdown list is now displaying, the answer is to initialise the mdb-select with the following code <script> $(document).ready(function() { $('#example').DataTable(); $('select').addClass('mdb-select'); $('.mdb-select').material_select(); }); </script> Also the number of rows displayed is configurable using the following code "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], more details on datatables.net website Many Thanks Colin

Add comment

cpshart free answered 6 years ago

0 0 Best answer

Hi Marta

I have just loaded your example code below   <a href="https://mdbootstrap.com/content/tables/#sorting" >https://mdbootstrap.com/content/tables/#sorting</a>  into the base index.html and the Search and Show 10 Entries <strong>do not display</strong>

Any ideas why this may be the happening

Thanks Colin

<!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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

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

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

</head>

<body>

<table id="example" 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>

.. etc...

<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>

<script>
$(document).ready(function() {
$('#example').DataTable();
$('select').addClass('mdb-select');
$('.mdb-select').material_select();
});
</script>

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

</html>

<strong>style.css</strong>

/* Your custom styles */
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
padding: 5px;
}
.dataTables_wrapper .mdb-select {
border: none;
}
.dataTables_wrapper .mdb-select.form-control {
padding-top: 0;
margin-top: -1rem;
margin-left: 0.7rem;
margin-right: 0.7rem;
width: 100px;
}
.dataTables_length label {
display: flex;
justify-content: left;
}
.dataTables_filter label {
margin-bottom: 0;
}
.dataTables_filter label input.form-control {
margin-top: -0.6rem;
padding-bottom: 0;
}
table.dataTable {
margin-bottom: 3rem!important;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 0;
}

Please insert min. 20 characters.

Hi Marta I have just loaded your example code below https://mdbootstrap.com/content/tables/#sorting into the base index.html and the Search and Show 10 Entries do not display Any ideas why this may be the happening Thanks Colin <!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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> </head> <body>  <table id="example" 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> .. etc... <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> </table>   <script> $(document).ready(function() { $('#example').DataTable(); $('select').addClass('mdb-select'); $('.mdb-select').material_select(); }); </script>  <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> </body> </html> style.css /* Your custom styles */ table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { padding: 5px; } .dataTables_wrapper .mdb-select { border: none; } .dataTables_wrapper .mdb-select.form-control { padding-top: 0; margin-top: -1rem; margin-left: 0.7rem; margin-right: 0.7rem; width: 100px; } .dataTables_length label { display: flex; justify-content: left; } .dataTables_filter label { margin-bottom: 0; } .dataTables_filter label input.form-control { margin-top: -0.6rem; padding-bottom: 0; } table.dataTable { margin-bottom: 3rem!important; } div.dataTables_wrapper div.dataTables_info { padding-top: 0; }

Add comment

cpshart free answered 6 years ago

0 0 Best answer

Hi Marta

Thanks for your reply, I am relatively new to coding, but making good progress, I have written a system to produce a datatables table for a mysql database using PHP, to report share dividend payments by date. Having completed the backend process successfully, providing, search by column, sorting, totals by column etc. I am now trying to integrate the code into an mdbootstrap framework. In doing so all the functionality works successfully except the Show (select 10,25,50,100) entries which displays as "Show entries" (i.e. no dropdown displays) and the page displays a table of 10 rows with no provision to change the table row size via the dropdown.

I can paste my code here if that helps.

Is it a better approach to start with the mdbootstrap table  <a href="https://mdbootstrap.com/content/tables/#sorting" >https://mdbootstrap.com/content/tables/#sorting</a>  and then integrate the backend code around your code, as opposed to my approach of writing the back end code and using code samples and then attempting to integrate the code into the mdbootstrap framework. I regularly get conflicts with Java files when using this approach, which I can normally resolve, but there may be a better approach.

Many Thanks

Colin

Please insert min. 20 characters.

Hi Marta Thanks for your reply, I am relatively new to coding, but making good progress, I have written a system to produce a datatables table for a mysql database using PHP, to report share dividend payments by date. Having completed the backend process successfully, providing, search by column, sorting, totals by column etc. I am now trying to integrate the code into an mdbootstrap framework. In doing so all the functionality works successfully except the Show (select 10,25,50,100) entries which displays as "Show entries" (i.e. no dropdown displays) and the page displays a table of 10 rows with no provision to change the table row size via the dropdown. I can paste my code here if that helps. Is it a better approach to start with the mdbootstrap table https://mdbootstrap.com/content/tables/#sorting and then integrate the backend code around your code, as opposed to my approach of writing the back end code and using code samples and then attempting to integrate the code into the mdbootstrap framework. I regularly get conflicts with Java files when using this approach, which I can normally resolve, but there may be a better approach. Many Thanks Colin Colin

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, are you using this table, yes: https://mdbootstrap.com/content/tables/#sorting ? And could you explain once again, more clearly what exactly you want to achieve with the table? I'll try to help. Best, Marta

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

cpshart

14Support score
6Questions 6Answers 0Snippets