Topic: MDB5 Datatable search
Expected behavior Search function for Datatable using data attributes. (I use PHP to fetch the data from MySQL to populate the data for the table).
Actual behavior Cannot filter the table with the search input
Resources (screenshots, code snippets etc.)
Here is example of datatable with static data using data attributes with a search function: https://mdbootstrap.com/snippets/standard/kpienkowska/6228967
For a search to work properly you need to either initiate datatable after it is populated or update the data after initiation.
Autoinit (init with data attribute) is performed on the page load. If you populate your table later instance does not 'have' this data.
Probably the easiest way to fix this in your case will be to keep the way you do everything right now but remove attribute data-mdb-datatable-init and init datatable with js after you populate your table.
const instance = new Datatable(document.getElementById('datatable'))
Pierre Grobbelaar priority commented 2 months ago
Thank you Kamila, Still does not work Can you please provide a sample code of a datatable with static data using data attributes with a search function. With the data-mdb-datatable-init the data displays correctly and the sorting works 100%. I just need it to filter the data from the search input.
Here is the code that Dawid provided for the previous version. This worked well.
const instance = mdb.Datatable.getInstance(document.querySelector('.datatable'));
document.querySelector('#datatable-search-input').addEventListener('input', (e) => { instance.search(e.target.value); });
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: PC
- Browser: Chrome
- OS: windows
- Provided sample code: No
- Provided link: No