JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
<table id="table" class="dataTable no-footer" role="grid"><thead><tr>
<th class="sorting_asc" tabindex="0" aria-controls="table" rowspan="1" colspan="1" aria-label="Preis: activate to sort column descending" aria-sort="ascending">Preis</th></tr></thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<div class="current-price sale-price-higher">723,02 €
</div><div></div></td></tr>
<tr role="row" class="even">
<td class="sorting_1">
<div class="current-price sale-price-higher">623,02 €
</div><div></div></td></tr>
<tr role="row" class="odd">
<td class="sorting_1">
<div class="current-price sale-price-higher">1.723,02 €
</div><div></div></td></tr>
<tr role="row" class="even">
<td class="sorting_1">
<div class="current-price sale-price-higher">2.623,02 €
</div><div></div></td></tr>
<tr role="row" class="odd">
<td class="sorting_1">
<div class="current-price sale-price-higher">123,02 €
</div><div></div></td></tr>
<tr role="row" class="even">
<td class="sorting_1">
<div class="current-price sale-price-higher">223,02 €
</div><div></div></td></tr>
<tr role="row" class="odd">
<td class="sorting_1">
<div class="current-price sale-price-higher"> NA
</div><div></div></td></tr>
</tbody>
</body>
</html>
JavaScript
$(document).ready(function() {
$.fn.dataTable.ext.type.order["html-num-fmt-pre"] = function(data) {
// Strip HTML
data = data.replace(/<.*?>/g, '');
// Remove dots
data = data.replace(/\./g, '');
// Replace commas dots
data = data.replace(/,/g, '.');
// Strip any remaining no numeric data
data = data.replace(/[^0-9\.\-]/g, '');
if ( data === '' ) { // it was NA
return -Infinity;
}
return data*1;
};
$("#table").DataTable({
language: {
decimal: ',',
thousands: '.'
},
columnDefs: [
{
targets: 0,
type: 'html-num-fmt'
}
]
});
});