Topic: How can I change the dropdown and search bar of DataTables?

.jodadev. pro asked 4 years ago


So I'm using DataTables downloaded from the original site because the one included in MDB is lacking some functionalities (like buttons, etc.). However, this unfortunately results in some errors in the styling. Specifically two errors:

1) The drop-down of the 'show entries' is not showing, so I would like to add the material select to it. How can I do this?

2) I'm trying to change the search bar for it to show the material input: .

Any idea on how to change both the dropdown of show entries and the search bar of search to work with the material design ones?

Here is a snippet:

Thanks in advance.

poomkawin free answered 4 years ago


Have a look at this:

I merged the two document ready functions into one and added necessary code to the DataTable initComplete function.

The spacing for both dropdown and search box still need adjustment, but the snippet should give you an idea how to correct it.

MDBootstrap staff commented 4 years ago

Thank you for your contribution. Your example works perfectly.

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.7
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes