Topic: How can I search/sort datatables using HTML attributes only ?

microvb priority asked 1 year ago


Expected behavior Column should be sorted by Purchase Date in DESC on page load

Actual behavior No sorting happens even though the applicable data-mdb- html attributes. Documentation is lacking in examples on how to sort/search using html attributes only for html rendered tables. All examples for search have the data loaded as a javascript array.

Resources (screenshots, code snippets etc.) Example

Expected response Please provide a complete example on how to :

  1. Search the table where the contents are rendered in HTML only. (examples show contents being loaded from a javascript object only)
  2. Sort the table in ASC/DESC on a specified column on page load where the contents are rendered in HTML only.

Grzegorz Bujański staff answered 1 year ago


Search the table where the contents are rendered in HTML only. (examples show contents being loaded from a javascript object only)

I'm not sure if I understand correctly. Would you like to use an example of Async data with data-attr? Unfortunately, this is not possible. In this case, it will be necessary to use JS code.

How can I set the style on a row-by-row basis using html attributes ?

There is also no possibility to style rows without using js code at the moment


microvb priority commented 1 year 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 1 year 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 priority commented 1 year 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 priority commented 1 year 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 1 year 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 priority commented 1 year 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 priority commented 1 year ago

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


Kamila Pieńkowska staff commented 1 year ago

You need to publish your snippet.


microvb priority commented 1 year 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 1 year 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


microvb priority answered 1 year ago


Thank you. That resolves #2.

Can you please give me information on how I can do the following :

Search the table where the contents are rendered in HTML only. (examples show contents being loaded from a javascript object only)

... Also, I have a new question :

How can I set the style on a row-by-row basis using html attributes ?

That should be all I need for now.

Thanks in advance.


Grzegorz Bujański staff answered 1 year ago


You need to correct the data attributes. Instead data-mdb-sortField="purchasedate" data-mdb-sortOrder="desc" use data-mdb-sort-field="purchasedate" data-mdb-sort-order="desc"



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 6.3.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: Yes