How can I search/sort datatables using HTML attributes only

microvb pro premium priority commented 2 years ago

For the search, I am looking for how to do this : https://mdbootstrap.com/docs/standard/data/datatables/#section-search

I am not allergic to using Javascript, however I do not want to use Javascript objects for the data itself. The examples supplied all show the data being drawn from a Javascript object.

I have tried to instance mdb by passing the table object alone (without the second parameter for data), but this doesn't do anything (doesn't work, and doesn't give an error either)

Grzegorz Bujański staff commented 2 years ago

Note that the search input is an external element, and the Datatable provides a search method. So in this case additional js code is also required.

microvb pro premium priority commented 2 years ago

I understand, however I need to know how to initialize the object where data is rendered in html, not from a json object.

In the example, this is the code for initializing :

const instance = new mdb.Datatable(document.getElementById('datatable'), data)

document.getElementById('datatable-search-input').addEventListener('input', (e) => { instance.search(e.target.value);});

I have tried without the json data :

const instance = new mdb.Datatable(document.getElementById('datatable'))

document.getElementById('datatable-search-input').addEventListener('input', (e) => { instance.search(e.target.value);});

This does not work.

microvb pro premium priority commented 2 years ago

I figured this out. My mistake, I was trying to getElementById() when the table had no id attribute.

This is working now. Thank you for your assistance. I presume the rest I can access using Javascript like this as well (style/etc).

Grzegorz Bujański staff commented 2 years ago

Not always. For example, if you want to set custom cell formatting, you need to add the appropriate option to the column you want to apply the formatting to. This requires the use of the update method, which requires a new data object. So you will have to extract the rows and columns from the Datatable instance and make the appropriate changes. It can be done, but it requires additional code. I created a snippet for you with an example of how to do it: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5324524#js-tab-view

microvb pro premium priority commented 2 years ago

It would seem it does support rendering without pulling all the columns and rows into new objects.

https://mdbootstrap.com/snippets/standard/microvb/5325103

microvb pro premium priority commented 2 years ago

How can I do the same thing but for row styles instead of cell ?

kpienkowska staff commented 2 years ago

You need to publish your snippet.

microvb pro premium priority commented 2 years ago

Didn't realize. Here is the updated code : https://mdbootstrap.com/snippets/standard/microvb/5333479

I had to fork again to make the changes as the other code was gone even for me. As you can see in the example, there is no need to pass the rows/columns when updating the columns directly, and using .update() with no parameters.

What I would like to know is how can I do this to set a row style based on the content of one or more cells ?

Grzegorz Bujański staff commented 2 years ago

We don't have a dedicated method, but you can do it in a simple way. Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5337243