Topic: Datatables support

mmmarkk01 priority asked 2 years 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">
      <th data-data="example_code">Code</th>
      <th data-data="example_description">Description</th>

<script src=""></script>
<script src=""></script>
  $(document).ready(function () {
      ajax: "/api/example_table_1/datatables/",

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 2 years 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 2 years 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?

mmmarkk01 priority commented 2 years 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 2 years 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:

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

Grzegorz Bujański staff answered 2 years ago

Are you sure you are using our tables? From what I can see, you additionally import another library. This example should help you:

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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