Topic: Datatables support

mmmarkk01 priority asked 10 months ago


Expected behavior Wrapping an AJAX datatable with the mdb5 datatable class div should result in a better looking AJAX datatable.

Actual behavior The table looks better but loses its AJAX functionality.

Resources (screenshots, code snippets etc.)

<div class="datatable">
<table id="example_table_1">
  <thead>
    <tr>
      <th data-data="example_code">Code</th>
      <th data-data="example_description">Description</th>
    </tr>
  </thead>
</table>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function () {
    $('#example_table_1').DataTable({
      ajax: "/api/example_table_1/datatables/",
    });
  });
</script>

This is what it looks like without the div:

Example without mdb5

This is what it looks like with the div: Example with mdb5


Michał Duszak staff answered 10 months ago


At the moment we do not have such an example prepared.

Datatables pagination does not allow you to retrieve the rest of the data asynchronously.

In this case, you would have to set the pagination = "false" option in the Datatables and add separate pagination that will handle the retrieval of subsequent data. Then, after downloading new data, just use the update method:

datatableInstance.update(data: Object, options: Object)

Michał Duszak staff answered 10 months ago


I have performed an AJAX call to provide data to my datatable. You can then select 2 rows per page and see beautiful pagination feature there. Is this the behaviour you wish to be there?

https://mdbootstrap.com/snippets/standard/m-duszak/3631171#js-tab-view


mmmarkk01 priority commented 10 months ago

I think this is not the behaviour I'm looking for. As an example, lets take an API with 100k items. When requesting this API I would expect us to only request the first x items, where x is the page length. For page length 10 this could look something like '?&start=0&length=10'. For obvious reasons this is preferred when working with large datasets.

This behaviour comes out of the box with datatables. This simplicity is the behaviour I'm looking for.


mmmarkk01 priority answered 10 months ago


Yes I am using the MDB tables, I can copy-paste the example from your link in my application and it works. However the provided example does not help me since its missing a key AJAX functionality; pagination. Basically what I'm looking for is an MDB implementation of this logic:

https://datatables.net/examples/server_side/simple.html

Where we do not have to write all the logic ourselves. Is that available in MDB?


Grzegorz Bujański staff answered 10 months ago


Are you sure you are using our tables? From what I can see, you additionally import another library. This example should help you: https://mdbootstrap.com/docs/standard/data/datatables/#section-async-data



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Microsoft
  • Browser: Edge
  • OS: 10
  • Provided sample code: No
  • Provided link: No