JSFiddle - React, Tailwind, and code Playground
by mosxe
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Score</th>
<th>Saldo1</th>
</tr>
</thead>
<tbody>
<tr>
<td>OOO "TEST"</td>
<td>402750</td>
<td>1000</td>
</tr>
<tr>
<td>OOO "TEST"</td>
<td>402750</td>
<td>1500.1010</td>
</tr>
<tr>
<td>OOO "TEST"</td>
<td>402750</td>
<td>1600.00</td>
</tr>
<tr>
<td>OOO "TEST"</td>
<td>402750</td>
<td>1212331000.013</td>
</tr>
<tr>
<td>OOO "TEST"</td>
<td>402750</td>
<td></td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function (){
var table = $('#example').DataTable({
"fnRowCallback" : function(row){
formatNumberColumnsTable(row, [2]);
return row;
}
});
function formatNumberColumnsTable(rows, indexColumn, notApplyIndexColumn) {
var arrayAllValues = Array.apply(null, Array($(rows).children().length)).map(function (x, i) { return i; });
if (indexColumn === 'all') {
indexColumn = [];
$.grep(arrayAllValues, function (el) {
if ($.inArray(el, notApplyIndexColumn) === -1) {
indexColumn.push(el);
}
});
}
$(indexColumn).each(function (i, val) {
$(rows).children().each(function (index, td) {
if (val === index) {
if ($(td).html() !== '') {
const numFormat = getFormatNumberTable().display;
console.log(numFormat);
$(td).text(numFormat($(td).text()));
}
else {
$(td).text('no data');
}
}
});
});
}
function getFormatNumberTable() {
return $.fn.dataTable.render.number(" ", ".", 2);
}
});