Order of Execution
Order of Execution
I have a table initialization function as follows:
function buildTable()
{
console.log("table is new");
var t = $('#myTable').DataTable( {
"destroy": true,
"data": theTable.data,
"columns": [
{"data": "depotName"},
{"data": "clientName"},
{"data": "rtuName"},
{"data": "deviceName"},
{"data": "serialNumber"},
{"data": "assetNumber"},
{"data": "serviceTag"},
{"data": "location"},
{"data": "ipAddress"},
{"data": "deviceType"},
{"data": "deviceStatusMessage"},
{"data": "quiesce"},
{"data": "utilization"},
{"data": "coverage"},
{"data": "monoLifeCount"},
{"data": "colorLifeCount"},
{"data": "pageCountThisMonth"},
{"data": "createdDate"},
{"data": "lastActiveDate"},
{"data": "deviceId"},
{"data": "rtuId"},
{"data": "clientId"},
{"data": "depotId"}
],
"columnDefs":
[
{
"render": function( data, type,row)
{
return '<a href=/edit_device?deviceId=' + row[19] + '>' + data ;
},
"targets": 19
}
],
"buttons" :
[
'colvis',
{
extend: 'collection',
text: 'Export',
buttons:
[
{
extend: 'print',
orientation : 'landscape',
pageSize: 'LEGAL',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'copyHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'pdfHtml5',
orientation : 'landscape',
exportOptions: {
columns: [ ':visible' ]
}
}
]
}
]
});
I have recently added the "data": section as I retrieve the table with web sockets and now my hyperlink as defined by the columnDef render function no longer works. It renders the column as follows:
<td><a href="/edit_device?deviceId=undefined">00F91526-8114-5DD4-877A-9ABBD720C697</a></td>
event though the data is present. This leads me to believe there may be an execution order problem or something I am missing.
sample row of rendered data
<tr role="row" class="odd"><td class="doLeft sorting_1">Pickering</td><td class=" doLeft">Laser Cartridge Services</td><td class=" doLeft">LCS - Home Office</td><td class=" doLeft">GWE505P01</td><td class=" doLeft">701531LM044FF-138-0</td><td class=" doLeft">missing</td><td class=" doLeft"></td><td class=" doLeft"></td><td>192.168.1.67</td><td>missing</td><td>missing</td><td>quiesce-off</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>2016-12-21 09:17:30</td><td>2016-12-21 09:17:30</td><td><a href="/edit_device?deviceId=undefined">00F91526-8114-5DD4-877A-9ABBD720C697</a></td><td>46053FD9-4DB9-503F-884F-EF753431F71F</td><td>F3B86EF2-CE9A-11E5-A838-00271353FF8D</td><td>1F30E1EF-DA3E-11E5-B267-00271353FF8D</td></tr>
Thanks for any assistance you may provide.
This question has accepted answers - jump to:
Answers
Should that be
return '<a href=/edit_device?deviceId=' + row[19] + '>' + row[19] + '</a>';
?
I pasted the code exactly as presented and it simply renders both of the references row[19] as undefined. HOWEVER changing both references to data seems to have solved the problem.
Don't know why yet!!
row.deviceId
would have been what you wanted. You appear to be using objects as the data source for each row rather than an array, sorow[19]
would be undefined.Allan
Thank you again.