MDBdatatable how to get the column data only on the activ pa

Topic: MDBdatatable how to get the column data only on the activ page

Riva priority asked 1 year ago

I have a question regarding MDBdatatable pagination. How can I retrieve the column data solely from the active page? Our aim is to load complete information of only the table items present on the current page. When switching to the next page, we would like to fetch the new active page's complete information. Could you please provide some examples or suggestions? Thank you very much.

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

Hi! Unfortunately the render event emits the full MDBDatatable data but we can try to make it work somehow.

I've created a snippet where I am listening for the render event, and based on the pagination wrapper, I check what data is currently visible (from - to). Then I slice the received data from the render event and I should get what I need. The visible names are shown in the list below the datatable.

https://mdbootstrap.com/snippets/vue/b-cylwik/5597955#js-tab-view

I think it works properly, but If you decide to go with something like that, it should be further tested.

Hope it helps! Best Regards!

Riva priority commented 1 year ago

Thank you for providing this helpful code snippet. It works perfectly. However, I have encountered an issue when using it for the "search" function. Upon performing a search, I retrieve the table row of the current filtered page, update the table data, and then the table will refresh and update. Unfortunately, the filtered search result disappears and the entire table is displayed again. Can you please advise on how to fix this issue? How can I keep the searched filtered table after the table re-rendered? Thanks.

Bartosz Cylwik staff commented 1 year ago

Does this issue refer to the snippet or is it something new? I don't think I understand the issue you are having.

The table is filtered by the inputs v-model added to the datatable search prop. When data is filtered (something written in the input) then you are updating the table? When is the filtered data disappearing? Is the v-model of the search input changing?

Riva priority commented 1 year ago

I think it is something new. "When data is filtered (something written in the input) then you are updating the table? " Yes, after the data is filtered, I update the row data for the filtered item, but after the table is updated, the filtered items are replaced with the full table data, "the v-model of the search input" does not change, it is still the previous input.

Bartosz Cylwik staff commented 1 year ago

Try resetting the search input value inside the nextTick when you are updating the data. It seems to fix the issue for me. Checkout the snippet below where I added 2 buttons, one without the nextTick and one with the nextTick

https://mdbootstrap.com/snippets/vue/b-cylwik/5607620#js-tab-view

Bartosz Cylwik staff commented 1 year ago

I added this issue for our list, we'll fix the issue with search for the next release.

Riva priority commented 1 year ago

this solution works for me, thanks.

Add comment