Topic: Datatables support
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:
This is what it looks like with the div:
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
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?
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 pro premium priority commented 3 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.
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)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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