How can i apply column formatting to just the currently displayed records

How can i apply column formatting to just the currently displayed records

AndrePageotAndrePageot Posts: 2Questions: 1Answers: 0

My datatables uses web api to deliver the data in JSON format.
After the page loads, the code makes the request and builds an array of data on return
like so
$.each(data, function (key, val) {
items.push(
[
val.ISIN
, val.Valoren
, val.FundName
, val.NAV
, val.NAV_Date
, val.CCY
, val.MasterAssetClass
, val.AssetClass
, val.GUID
]);
});

Once the data array is constructed, I load the datatable with the data, with these options.
I find that in chrome and firefox, the speed is very quick, but in IE its incredibly slow.
Im using the render options to format the column data but it still seems to apply the formatting to every single row even though the table only display 25 records.
If I comment out these options, the speed in IE is just as fast as chrome and firefox.

How can I only have the format apply to records in view?

$('#tgdFundResults').dataTable({
//paging: false,
//autoWidth:true,
pageLength: 25,
scrollY: 600,
data: items,
deferRender: true,
scrollCollapse: true,
scroller: true,
columnDefs: [
{ // The data parameter refers to the data for the cell (defined by the
// data option, which defaults to the column being worked with, in
// this case data: 0.
"render": function (data, type, row) {
//if the row data is not an empty string
if (data != '') {
var anc = '

<

div style="text-align:left;"><a class="opnSecurity" onclick="return false;" title="open fund info" data-guid="' + row[8] + '" href="funds/fundsFundInfo/?securityGUID=' + row[8] + '" target="window">' + data + '</a>';
return anc;
}
else { return ''; }
}, "targets": 2
}
, {
"render": function (data, type, row)
{ if (data != '') { return '<span style="float:right;">' + Number(data).toFixed(4) + '</span>'; } else { return '';}}
, "targets": 3
}
, {
"render": function (data, type, row)
{ if (data != '') { var dt = new Date(data); return dt.toLocaleDateString();} }
, "targets":4
}
, { "visible": false, "targets": [ 3 ] }
]
, initComplete: function (settings, json) { $('#preLoadingImg').hide(); }
});

I hope this is enough information for you all. If not please let me know what else you need to know

thanks in advance

Answers

  • allanallan Posts: 63,839Questions: 1Answers: 10,518 Site admin

    If you link to the page I'd be happy to take a look and that way I can profile it and see what might be taking so long.

    Allan

  • AndrePageotAndrePageot Posts: 2Questions: 1Answers: 0

    ok, it will take me a little time to make a public page

    i'll get back to you as soon as its ready

    thanks

This discussion has been closed.