Topic: MDB5 Datatable search

Pierre Grobbelaar priority asked 2 months ago


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


Kamila Pieńkowska staff answered 2 months ago


Here is example of datatable with static data using data attributes with a search function: https://mdbootstrap.com/snippets/standard/kpienkowska/6228967


Kamila Pieńkowska staff answered 2 months ago


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); });



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

  • 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