Topic: Datatable - sorting a link

carlivs priority asked 11 months 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 11 months 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 priority commented 11 months 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 11 months ago

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


Kamila Pieńkowska staff commented 11 months 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 priority commented 11 months 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

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