Topic: Datatables sort behavior is buggy depending upon data attributes

AHOY priority asked 1 year ago

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">
        <th data-mdb-sort="false">Column 1</th>
        <th data-mdb-sort="false">Column 2</th>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 6</td>
        <td>Column 7</td>
        <td>Column 8</td>

<link rel="stylesheet" href="css/styles.css">
<script src="js/mdb.min.js"></script>
<script src="js/modules/datatable.min.js"></script>

Mateusz Lazaru staff answered 1 year 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.

In this snippet adding data-mdb-sort="false" effectively blocks sorting.

AHOY priority commented 1 year 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!

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 5.0.0
  • Device: Desktop
  • Browser: Chrome 106.0.5249.119
  • OS: Mac OS 11.6
  • Provided sample code: No
  • Provided link: No