Column sorts alphabetically even while returned data is numeric
Column sorts alphabetically even while returned data is numeric
elstupid
Posts: 17Questions: 3Answers: 1
See https://live.datatables.net/roqadedu/1/edit
Can't get my head around the following problem.
I have a table with data loaded from JSON. One of the columns is a numerical field which, if I display it natively, sorts just fine on numerical order.
When I render the column with a progressbar, which is HTML, it doesn't sort numerically anymore, which I would expect as HTML is alphabetical data.
The solution would be to use orthogonal data. So in the render function for the progressbar I made it to return original data when type is sort.
render: function(data,type,row,meta) {
console.log(type);
//return data;
//if (type=='sort') return DataTable.render.number(null, null,0).display(row.progress_counter || 0);
if (type=='sort') return data;
var min = row.progress_counter || 0;
var max = row.progress_end || 1;
//if (type=="sort" || type == "filter") return DataTable.render.number(null, null,0).display(min);
if (type!='display') return min+'/'+max;
var percentage = Math.min(Math.round(min / max * 100), 100);
var progressbar = '<sl-progress-bar value="'+percentage+'" label="Progress">'+min+'/'+max+'</sl-progress-bar>';
return progressbar;
}
Line 6 should do the trick and return original data when type = sort. It sorts ok-ish, but the numbers here are treated as alphabetical, which is visible in my live example on page 2, where 12 is positioned between 1 and 2
If I uncomment line 4, original data is returned and sorting is ok.
I tried some other solutions too, with rendering the data as number, but that also doesn't work.
What am I missing here?
Replies
You need to use:
Otherwise the type detection is performed on the rendered data, which it is seeing as a string, and thus a string data type is assigned to the column.
Allan
p.s. Great test case - thank you for taking the time to make it.
Thanks @allan ! This solved my problem.
Is this documented somewhere and I missed it?
Test case has been some work yes, glad to see it did help in finding a swift solution
The types DataTables will "ask" for are documented here.
It is also discussed in the
columns.renderfunction documentation.Allan