Datatable server side request, search sorting etc.

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 }
  );
});

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.

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.