Topic: How to make server side datatable

hkrhee priority asked 1 year ago


Dear Sir,I am using MDB5 Vue. My backend is in Java & Spring.I succeeded in getting data from server and rendering the data list in the Datatable's rows.But after that, the following functions do not work.

  1. "Searching",
  2. (In selectable rows) when the checkbox of is clicked, the checkbox of the entire row is not checked.

When datatable rows are updated after fetching data from the server, can you tell me how to use these functions or examples of usage?


Mikołaj Smoleński staff commented 1 year ago

At first, I strongly recommend to use the latest 1.4.0 version of MDB5 Vue. In the latest release we fixed some issues with loading async data in datatables: https://mdbootstrap.com/docs/b5/vue/getting-started/changelog/

Please let me know if the issue still exists in 1.4.0.

Keep coding,  Mikołaj from MDB


hkrhee priority commented 1 year ago

Thank you. After updating to version 1.4, I checked if the problem recurs. Selecting all in 'checkbox' is working fine. However, the search filtering with MDBInput & MDBDatatable still does not work.


Mikołaj Smoleński staff commented 1 year ago

In such case I suggest to reload the component by updating it's key prop just after the page is loaded.

Keep coding,  Mikołaj from MDB


hkrhee priority commented 1 year ago

@Mikołaj Smoleński Can you tell me more about what updating the key prop is?


Mikołaj Smoleński staff commented 1 year ago

You will only have to define any key prop that will change just after the page is loaded to reload the component (e.g. in mounted hook).

So it should look like this:MDBDatatable :key="key" ...

and then in setup:

key = ref(0); 
onMounted = (() => { key.value++ });
return { key }

Keep coding, Mikołaj from MDB


hkrhee priority commented 1 year ago

@Mikołaj Smoleński I really appreciate your help. Thank you so much!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Window 10
  • Provided sample code: No
  • Provided link: No