Topic: How can I change the dropdown and search bar of DataTables?
Hello,
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 https://mdbootstrap.com/docs/jquery/forms/select/ to it. How can I do this?
2) I'm trying to change the search bar for it to show the material input: https://mdbootstrap.com/docs/jquery/forms/inputs/ .
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: https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811?view=side#css-tab-view.
Thanks in advance.
Hi,
Have a look at this: https://mdbootstrap.com/snippets/jquery/poomkawin/1216646
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 pro premium priority commented 5 years ago
Thank you for your contribution. Your example works perfectly.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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