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.