Datatable server side request, search sorting etc.


Topic: Datatable server side request, search sorting etc.

caspar.sim pro premium priority asked 8 months ago

Expected behavior Users can search/sort data on database instead of HTML DOM when using datatable.

Actual behavior Unable to find any tutorials/documents on datatable server-side processing (searching & sorting)


Grzegorz Bujański staff answered 8 months ago

Unfortunately, we do not have such a tutorial at the moment. It would be difficult for us to create such a tutorial because each API is different and the data is returned differently.

Datatables provides methods that will help in this case. But you have to add the rest of the functionality on your own. You have access to the update method which allows you to add new data and update it. An example for search might look like this:

<div class="container mt-5 pt-5">
  <div class="form-outline mb-4">
    <input
      type="text"
      class="form-control"
      id="datatable-search-input"
    />
    <label class="form-label" for="datatable-search-input">Search</label>
  </div>
  <div id="datatable" data-mdb-loading="true"></div>
</div>

const columns = [
  { label: 'Address', field: 'address' },
  { label: 'Company', field: 'company' },
  { label: 'Email', field: 'email' },
  { label: 'Name', field: 'name' },
  { label: 'Phone', field: 'phone' },
  { label: 'Username', field: 'username' },
  { label: 'Website', field: 'website' },
];

const asyncTable = new mdb.Datatable(
  document.getElementById('datatable'),
  { columns },
  { loading: true }
);

document.getElementById('datatable-search-input').addEventListener('input', (e) => {
 // search data from your api, save them as data and update datatable
 const data = dataFromYourApi

 asyncTable.update(
    {
      rows: data.map((user) => ({
        ...user,
        address: `${user.address.city}, ${user.address.street}`,
        company: user.company.name,
      })),
    },
    { loading: false }
  );
});

caspar.sim pro premium priority answered 8 months ago

In the code example you shared, I can see how the mdb datatable fetch the data from the server, but it dosen't handle the paging, searching, and sorting at the server side, which make it not a good way to handle massive data.

I would expect the the mdb datatable to work like jQuery DataTables (https://datatables.net/examples/server_side/simple.html), MDB specify how the js client should send the ajax request for data fetching, sorting, and searching. MDB also specify the data structure the server should return. This way, it will be easier for us to work on.


Grzegorz Bujański staff answered 8 months ago

At the moment, we do not have examples of server-side data handling. I will add this to our list of ideas, and maybe one day we will add examples like this.


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Lenovo Laptop
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No