createdRow option holding onto old variable when updating
createdRow option holding onto old variable when updating
Hi,
I am using the createdRow option to add an attribute to the row. This works fine when I first create the DataTabe. But if I want to change the contents of the table. I have a check to see if DataTables already exists, in this case I clear the table out and then add the new rows.
However when I do this, the variable that I have created "recordset" does not update within the createdRow option. As result, the new rows are added but contain all recordset values.
Please see my code as an example:
var recordset = (data.features)
var results = objresults(recordset)
function objresults(recordset) {
var columns = []
var columnheaders = recordset[0].properties;
var len = Object.keys(columnheaders).length;
var tablewidth = len * 200;
$("#tblResults").width(tablewidth);
for (var key in columnheaders)
{
var obj = {}
var title = "title";
var className = "className";
var width = "width";
obj[title] = key;
obj[className] = key;
var vkey = key;
var objectlist = TableSettings();
for (key in objectlist)
{
if ((objectlist[key].hasOwnProperty(vkey)) == true) {
var nestedobject = objectlist[key];
var nestedobject2 = nestedobject[vkey];
var nestedobject3 = nestedobject2["width"];
obj[width] = nestedobject3;
}
}
columns.push(obj);
}
var data = [];
for (var i = 0; i < recordset.length; i++) {
var rowHash = []
row = recordset[i].properties;
for (var key in row){
var value = row[key];
rowHash.push(value);
}
data.push(rowHash);
}
var objectresult = {columns: columns, data: data};
return objectresult
}
if (_myTable) {
_myTable.clear();
_myTable.rows.add(results.data)
.draw();
}
else
{
_myTable = $('#tblResults').DataTable(
{
"data": results.data,
"columns": results.columns,
"createdRow": function( row, data, dataIndex) {
{
var lonlat = recordset[dataIndex].geometry.coordinates;
var latlon = lonlat.reverse();
$(row).attr("data.latlong", latlon);
}
},
"paging": false,
"ordering": true,
"info": false,
"searching": false,
"scrollY": 125,
"scrollX": 1000
}
);
Would anyone be able to advise where I am going wrong in my code?
Thanks
Dave
This question has an accepted answers - jump to answer
Answers
Hi Dave,
We'd really need a test case that can be debugged live. I don't immediately see the issue from the above code I'm afraid.
Having said that, why not just use
row.geometry....
in the function?Allan
Hi Allan,
Sorry, I didn't quite follow what you meant by "row.geometry". As this does not appear to be a reference in the API? or maybe I'm missing something?
I have documented step through with some screenshots of the debug console in google chrome which clearly highlights the problem if you would care to take a look:
https://www.dropbox.com/s/zg88uh6i2oc0nz1/DataTables_CreatedRow.docx?dl=0
Many Thanks
Dave
My point is that data object for the row is passed in to the
createdRow
method as the second parameter (sorry I should have saiddata.geometry
rather thanrow.geometry
).If you just add
console.log( data )
into your callback you should see the data object in your console.Allan
I don't pass the geometry object into the data object. It is a separate object on its own
console.log(geometry) brings up my geometry object correctly when I initialise DataTables and the createdRow option for the first time. But if I clear my table out and then add new rows as a result of my column, data and geometry objects being refreshed: the function is still using the original geometry object that I passed to the function when I initialised DataTables.
Looks like I have managed to now resolve this by pushing my geometry object into my data array and then running the following:
function(row, data, dataIndex) {
var geomfield = ((data.length) - 1);
var lonlat = data[geomfield].geometry.coordinates;
var latlon = lonlat.reverse();
$(row).attr("data.latlong", latlon);
},
Many Thanks for your help!
Perfect! Sorry - I misread your code above, but good to hear you have it working now.
Allan