attributes are removed before table is rendered

lubytes

I've recently inherited a project and realized a column in our Datatables isn't being sorted properly. I thought this would be as simple as adding the HTML5 attribute data-sort to the <td> tag, but it seems any attributes (classes/ids/etc) are removed before they make it to the screen for our <td> tags.

Here we create a field and I attempt to add the data-sort attribute
thingFields.ts

class SeenBy extends allThings<MapRest.ThingsWithOtherthings> {
    readonly id = "seen-by";
    
    render(thing: MapRest.ThingsWithOtherthings): String {
        let popularity = thing.interfaces.reduce((acc, thing) => acc + thing, 0);
        return `<td class="seen-by" data-sort="${popularity}"> ${popularity} rating</td>`;
    }
}

When initializing the DataTable we do the following
thingTable.ts

private initializeDataTable(things: T[]): DataTables.Api {
    let columnDefs: DataTables.ColumnDefsSettings[] = this.thingFieldRegistry.fields.map((field, index) => this.generateColumnDefForField(field, index));

    let settings: {...} ={
        colReorder: true,
        data: things,
        columnDefs: columnDefs,
        drawCallback: () => this.refreshTable(),
        deferRemder: true,
        scrollY: this.height,
        scrollCollapse: true,
        scroller: true
    };

    let table = this.$table.DataTable(settings);
}

...

private generateColumnDefForField(field: thingField<T>, index: number): DataTables.ColumnDefsSettings {
    return {
        targets: [index],
        type: field.type,
        render: (data: any, type: string, thing: T, object: any) => field.render(thing),
    };
}

The resulting <td> entry for SeenBy is <td class="sorting_1">...</td> I'm not sure where the sorting_1 is coming from but as you can see, the class I specified and data-sorting is nowhere to be found.

This project is in a closed-off network so unfortunately I can't use the debugger or supply a link. I've spent most of my time investigating as to why, but maybe I should be adding this attribute after the table has been created. Either solution would be fine, but knowing why I've had this struggle would be great too.

kthorngren

the class I specified and data-sorting is nowhere to be found.

Likely it has to do with use Javascript sourced (data: things,) data versus DOM sourced data.

I don't believe that Datatables will use the HTML5 data attributes for sorting unless its a DOM sourced table. For Javascript sorting you should probably use columns.render. More info can be found in the Orthogonal Data doc. Use the sort type to return the portion of the data you want to affect the sort.

If this doesn't help then please post an example of your data. Better yet put together a simple test case representing your data so we can help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin