Angular Datatables sorting text inside hyperlink instead of href

Question

I am attempting to sort a column alphanumerically that contains an anchor tag which seems to be 'intercepting' the sort function. It looks like something along the following lines:

<tbody>
    <tr><td><a href="/1"></a>Fox</td><tr>
    <tr><td><a href="/2"></a>Cow</td><tr>
    <tr><td><a href="/3"></a>Dog</td><tr>
</tbody>

It will return Fox,Cow,Dog and Dog,Cow,Fox respectively. How do I sort based the content of the a tag rather than the text of the a tag itself?

ctrl.dtOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withOption("order", [
        [1, "asc"]
    ])
    .withOption('paging', false)
    .withOption('searching', false)
    .withOption("sDom", '<"top">rt<"bottom"flp><"clear">');

ctrl.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0).notSortable(),
    DTColumnDefBuilder.newColumnDef(1)
];

1: Not sortable
2: Alphanumeric (Issue Column)
3-10: Alphanumeric - td only has numbers so it sorts fine

Answer 1

Try to use .withOption('type', 'html') for the column that contains HTML as follows:

ctrl.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0).notSortable(),
    DTColumnDefBuilder.newColumnDef(1).withOption('type', 'html')
];

From the documentation:

html - Basic string processing for HTML tags

Sorting - sorted with HTML tags removed
Filtering - HTML tags removed from filtering string

See columns.type for more information.