I am reading a json file from remote url and displaying it in DataTable.
<script>
$(document).ready(function () {
$('#example').DataTable(
{
ajax: {
method: 'GET',
url: 'https://chainformed.s3.us-east-1.amazonaws.com/Data/mostwatched.json',
dataSrc: ''
},
paging: false,
responsive: true,
language: {
url: "//cdn.datatables.net/plug-ins/1.12.1/i18n/tr.json",
},
columns: [
{ "data": "id" },
{ "data": "rank" },
{ "data": "name" },
{ "data": "watchlist" },
{ "data": "percentage" },
{ "data": "difference" },
{ "data": "timestamp" }
]
});
$('.dataTables_length').addClass('bs-select');
});
</script>
I would like to be able to format and manipulate the data returned from that json file. What is the best way to do it?
For example, i would like to change the values from ({ "data": "watchlist" }) field to number format with comma. How can i achieve it?
I tried this but with no luck: https://datatables.net/reference/option/ajax.dataSrc
Use render element.
Read document from Format output data - orthogonal data
and example
Another way u can use columnDefs
<script>
$(document).ready(function () {
$('#example').DataTable(
{
ajax: {
method: 'GET',
url: 'https://chainformed.s3.us-east-1.amazonaws.com/Data/mostwatched.json',
dataSrc: ''
},
paging: false,
responsive: true,
language: {
url: "//cdn.datatables.net/plug-ins/1.12.1/i18n/tr.json",
},
columns: [
{ "data": "id" },
{ "data": "rank" },
{ "data": "name" },
{ "data": "watchlist" },
{ "data": "percentage" },
{ "data": "difference" },
{ "data": "timestamp" }
],
'columnDefs': [
{
"targets": 3,
"data": "watchlist",
"render": function ( data, type, row, meta ) {
return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
]
});
$('.dataTables_length').addClass('bs-select');
});