How can i apply column formatting to just the currently displayed records
How can i apply column formatting to just the currently displayed records
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
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
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