select rows not showing select dropdown list in mdb

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: select rows not showing select dropdown list in mdb

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

 

 

 

 

 

 

Marta Szymanska staff pro premium answered 7 years ago

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

cpshart answered 7 years ago

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    

cpshart answered 7 years ago

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> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> <!-- // Within <head></head> tags--> <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> <!-- Start your project here--> <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> <!-- /Start your project here--> <!-- SCRIPTS --> <script> $(document).ready(function() { $('#example').DataTable(); $('select').addClass('mdb-select'); $('.mdb-select').material_select(); }); </script> <!-- 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> </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; }  

cpshart answered 7 years ago

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

Marta Szymanska staff pro premium answered 7 years ago

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

Marta Szymanska staff pro premium answered 7 years ago

Hi, sorting datatable is still not working in MDB 4.5.0 PRO or which version do you have? Best, Marta
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
cpshart
14Support score
6Questions 6Answers
0Snippets likes 0Snippets