Topic: Filters in table not working (MDB Pro + Admin)

iliketheinterwebs pro asked 4 years ago


I followed the tutorial and I also tested the downloaded file final for the Table section and the rows filter as well as other filter segments in the "Blue Select" section does not show up. Is this a bug?
Start your code here
<!--Main Layout--> <main> <div class="container-fluid mt-2"> <!--Section: Table--> <section class="mb-5"> <!--Top Table UI--> <div class="card p-2 mb-5"> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-lg-3 col-md-12"> <!--Name--> <select class="mdb-select colorful-select dropdown-primary mx-2"> <option value="" disabled selected>Bulk actions</option> <option value="1">Delate</option> <option value="2">Export</option> <option value="3">Change segment</option> </select> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-3 col-md-6"> <!--Blue select--> <select class="mdb-select colorful-select dropdown-primary mx-2"> <option value="" disabled selected>Show only</option> <option value="1">All <span> (2000)</span> </option> <option value="2">Never opened <span> (200)</span> </option> <option value="3">Opened but unanswered <span> (1800)</span> </option> <option value="4">Answered <span> (200)</span> </option> <option value="5">Unsunscribed <span> (50)</span> </option> </select> <!--/Blue select--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-3 col-md-6"> <!--Blue select--> <select class="mdb-select colorful-select dropdown-primary mx-2"> <option value="" disabled selected>Filter segments</option> <option value="1">Contacts in no segments <span> (100)</span> </option> <option value="1">Segment 1 <span> (2000)</span> </option> <option value="2">Segment 2 <span> (1000)</span> </option> <option value="3">Segment 3 <span> (4000)</span> </option> </select> <!--/Blue select--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-3 col-md-6"> <form class="form-inline mt-2 ml-2"> <input class="form-control my-0 py-0" type="text" placeholder="Search" style="max-width: 150px;"> <button class="btn btn-sm btn-info ml-2 px-2"> <i class="fa fa-search"></i> </button> </form> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!--Top Table UI--> <!--Card--> <div class="card card-cascade narrower"> <!--Card header--> <div class="view py-3 gradient-card-header info-color-dark mx-4 d-flex justify-content-between align-items-center"> <div> <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2"> <i class="fa fa-th-large mt-0"></i> </button> <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2"> <i class="fa fa-columns mt-0"></i> </button> </div> <a href="" class="white-text mx-3">Table name</a> <div> <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2"> <i class="fa fa-pencil mt-0"></i> </button> <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2" data-toggle="modal" data-target="#modalConfirmDelete"> <i class="fa fa-remove mt-0"></i> </button> <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2"> <i class="fa fa-info-circle mt-0"></i> </button> </div> </div> <!--/Card header--> <!--Card content--> <div class="card-body"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th> <input type="checkbox" id="checkbox"> <label for="checkbox" class="label-table"></label> </th> <th class="th-lg">First column</th> <th class="th-lg">Second column</th> <th class="th-lg">Third column</th> <th class="th-lg">Fourth column</th> <th class="th-lg">Fifth column</th> <th class="th-lg">Sixth column</th> </tr> </thead> <tbody> <tr> <th scope="row"> <input type="checkbox" id="checkbox1"> <label for="checkbox1" class="label-table"></label> </th> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> <tr> <th scope="row"> <input type="checkbox" id="checkbox2"> <label for="checkbox2" class="label-table"></label> </th> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> <tr> <th scope="row"> <input type="checkbox" id="checkbox3"> <label for="checkbox3" class="label-table"></label> </th> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> </tbody> </table> </div> <hr class="my-0"> <!--Bottom Table UI--> <div class="d-flex justify-content-between"> <!--Name--> <select class="mdb-select colorful-select dropdown-primary mt-2 hidden-md-down"> <option value="" disabled>Rows number</option> <option value="1" selected>10 rows</option> <option value="2">25 rows</option> <option value="3">50 rows</option> <option value="4">100 rows</option> </select> <!--Pagination --> <nav class="my-4"> <ul class="pagination pagination-circle pg-blue mb-0"> <!--First--> <li class="page-item disabled"> <a class="page-link">First</a> </li> <!--Arrow left--> <li class="page-item disabled"> <a class="page-link" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> </li> <!--Numbers--> <li class="page-item active"> <a class="page-link">1</a> </li> <li class="page-item"> <a class="page-link">2</a> </li> <li class="page-item"> <a class="page-link">3</a> </li> <li class="page-item"> <a class="page-link">4</a> </li> <li class="page-item"> <a class="page-link">5</a> </li> <!--Arrow right--> <li class="page-item"> <a class="page-link" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> </li> <!--First--> <li class="page-item"> <a class="page-link">Last</a> </li> </ul> </nav> <!--/Pagination --> </div> <!--Bottom Table UI--> </div> <!--/.Card content--> </div> <!--/.Card--> </section> <!--Section: Table--> </div> </main> <!--Main Layout-->

Jakub Strebeyko staff answered 4 years ago


Hi there arieldanaron,

Did you initialize mdb-select in your JavaScript file? MDB CSS code hides the default select elements - for them to take up with their material design features, they have to be initialized, that is they must become subject of a jQuery manipulation, as it is stated in step 3 of lesson 4 of our tutorial. In case of further questions do not hesitate to ask.

With Best Regards,
Kuba


iliketheinterwebs pro commented 4 years ago

Thank you Kuba! I am so lame! Wow I must have been tired because yeah...there it is in the tutorial. I appreciate your help...this worked!!! :)


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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