1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: How to make server side datatable

hkrhee priority asked 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago

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

Mikołaj Smoleński staff commented 2 years 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 2 years ago

@Mikołaj Smoleński I really appreciate your help. Thank you so much!
Write
Create snippet
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
  • ForumUser: 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
Tags
mdbdatatable mdbpro
About author
hkrhee
10Support score
4Questions 1Answers 1Snippets