Data tables

Hi all,
We are using Datatables in one of our larger sites, it’s out of the box performance is superb:
https://datatables.net/examples/index

Is anyone else here using it? If so, did you find any integration issues with it?

This is a requested feature. It would help if you voted for it.

Thanks for that @raymantle I’m surprised something like that isn’t already in Wappler TBH, given the popularity of displaying all manner of data within a table. We’ve been using it for years and it’s very powerful and relatively easy to set up.

I don’t wish to criticise Wappler in any way with these comments, I’m still impressed with the package as a whole and the development over time.

Hello, I’m implementing jquery’s dataTable plugin. But I’m having problems, because the plugin initialization comes before loading the data in the table generated by wappler, that is, the plugin runs first and doesn’t find any records, then wappler comes and fills the lines.

How did you resolve this?

Have you guys seen this post?

Hello.

I have used datatables in Wappler. In my case, it was not an easy thing to accomplish, but it can be done.

I don’t have the time to make a tutorial, but feel free to ask any specific questions.

Overall, I have an html table with dynamic data (
< table id=“mainTable”> …
< tbody is=“dmx-repeat” dmx-generator=“bs4table” dmx-bind:repeat=“getData.data.data” id=“tableRepeat2”>…
)

Then the serverConnect “getData” has a Dynamic Event > Success Action > Custom Flow.

In a nut shell, the custom flow does two things:

  1. destroy the datatable (otherwise when data changes, the datatable object becomes out of sync with the new fetched data, column sorting, filters, etc).
    https://datatables.net/reference/api/destroy()

  2. Run ‘load datatable’ ( $(’#mainTable’).DataTable({… )
    https://datatables.net/examples/basic_init/zero_configuration.html

*+ I added a Local Storage Manager element to handle “the state” of the table and I reflect it on the UI (some tables with a decent amount of rows can take time to render client-side, so displaying a “loading data” indicator can improve the UX)

More on local storage:
(https://docs.wappler.io/t/creating-a-shopping-cart-with-the-data-store-component/17465)

Best regards.

1 Like