Datatable - sorting a link


Topic: Datatable - sorting a link

carlivs pro premium priority asked 2 years ago

Hi, the sorting of a column doesn't work correctly when creating a link via the 'map' mechanism.
I would expect the 'Title' column to sort alphabetically but instead it sorts on the length of the string?

    const instance = new mdb.Datatable(document.getElementById('datatable'), {
        columns: [
            { label: 'Title', field: 'title' }
        ],
        rows: [
            @Html.Raw(Model)
        ].map((row) => {
            return {
                ...row,
                title: `<a href="${row.detailUrl}" target="_blank">${row.title}<a/>`
            };
        })
    }, { sortField: 'title', sortOrder: 'asc' });

Grzegorz Bujański staff commented 2 years ago

Can you send a snippet with an example? If I understand correctly, this is the case: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5260962#js-tab-view but everything seems to be working fine. Have I missed something?


carlivs pro premium priority commented 2 years ago

Hi Grzegorz Seems the sorting gets messed up when you add relative links with id's: https://mdbootstrap.com/snippets/standard/kephas/5263589#js-tab-view


Grzegorz Bujański staff commented 2 years ago

Thanks for reporting. we will fix it as soon as possible


kpienkowska staff commented 2 years ago

Links were sorted not by length but as a string with tags and attributes. To work around that you can add data attribute before href. Snippet here:

https://mdbootstrap.com/snippets/standard/kpienkowska/5277359


carlivs pro premium priority commented 2 years ago

Thank you very much. That will do the trick :)


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.3.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Microsoft Windows 11
  • Provided sample code: No
  • Provided link: No