Topic: Datatables sort behavior is buggy depending upon data attributes
Expected behavior
Use of data-mdb-pagination="false" is buggy when using js/modules/datatable.min.js.
If using data-mdb-pagination="false" with no other data attributes, two copies of the element used to depict sort direction are added to each column heading. Hovering over a column heading and clicking the column heading results in two arrows being displayed.
If using data-mdb-pagination="false" with data-mdb-sort="false" for each column heading will fix the above display issue, however, columns will still be sortable.
Actual behavior
Interestingly, if I load src/mdb/js/pro/datatable/index.js rather js/modules/datatable.min.js everything works just fine.
Resources (screenshots, code snippets etc.)
<div class="datatable" data-mdb-pagination="false">
<table>
<thead>
<tr>
<th data-mdb-sort="false">Column 1</th>
<th data-mdb-sort="false">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 5</td>
<td>Column 6</td>
</tr>
<tr>
<td>Column 7</td>
<td>Column 8</td>
</tr>
</tbody>
</table>
</div>
<link rel="stylesheet" href="css/styles.css">
<script src="js/mdb.min.js"></script>
<script src="js/modules/datatable.min.js"></script>
mlazaru staff answered 2 years ago
The problem with creating two arrows pointing to the sorting direction may have appeared because of importing both - mdb.min.js(which contains datatable module) and datatable module itself.
I tried to recreate this problem but as soon as I haven't doubled imports, no problem occured. https://mdbootstrap.com/snippets/standard/mlazaru/4502100
In this snippet adding data-mdb-sort="false"
effectively blocks sorting.
AHOY pro premium priority commented 2 years ago
Ugh! You are absolutely right. I didn't realize the pro version of mdb.min.js came packed with the modules. Thank you for the quick response!
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 5.0.0
- Device: Desktop
- Browser: Chrome 106.0.5249.119
- OS: Mac OS 11.6
- Provided sample code: No
- Provided link: No