createdRow option holding onto old variable when updating

daveg

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

allan

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

daveg

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

allan

My point is that data object for the row is passed in to the createdRow method as the second parameter (sorry I should have said data.geometry rather than row.geometry).

If you just add console.log( data ) into your callback you should see the data object in your console.

Allan

daveg

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.

daveg

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!

allan

Perfect! Sorry - I misread your code above, but good to hear you have it working now.

Allan