Geo Data

ljr1981

I have a table with: Key, IP, Lat, Long, Date-time fields.

When my user presses a button, I want to send the Lat/Long values to the server on a "create". The server will figure out the Key, IP, and Date-time fields and return the entire set of row data back to the browser as a "data" response, where Datatables then creates a new row and fills the fields in from the response data it gets.

Examples of this already being done?

ljr1981

The example is here. Click "Try it" and then you'll have to refresh the window to get the data to load. What I want is a callback with the newly minted data so a new row can be created. I just don't know how to set that up.

kthorngren

I didn't look into your code but row.add() is one way to add the new data to the table. You just need it in the format your Datatable is setup for.

Kevin

ljr1981

Looks like that did the trick:

    $.post("geodata",
       {
        "action":"create",
        "data":[{
                "key":"0",
                "ip":"0.0.0.0",
                "lat":position.coords.latitude,
                "long":position.coords.longitude,
                "datetime":""
                }]
      },
      function( d ) {
        var xTable = $('#example').DataTable();
        xTable.row.add([d.data["0"].key]);
        xTable.draw();
        }
    );

And then it promptly failed: Something to do with the d.data[...] call

ljr1981

Looks like this works:

    $.post("geodata",
       {
        "action":"create",
        "data":[{
                "key":"0",
                "ip":"0.0.0.0",
                "lat":position.coords.latitude,
                "long":position.coords.longitude,
                "datetime":""
                }]
      },
      function( d ) {
        var xTable = $('#example').DataTable();
        var k = d.data["0"].key;
        var ip = d.data["0"].ip;
        var lt = d.data["0"].lat;
        var ln = d.data["0"].long;
        var dt = d.data["0"].datetime;
        xTable.row.add({key:k,ip:ip,lat:lt,long:ln,datetime:dt});
        xTable.draw();
        }
    );

The row add `data' argument needed to be enclosed in {...} as an Object and then key:value paired so the add feature could know what data was what for the datatable.

kthorngren

This

xTable.row.add([d.data["0"].key]);

Probably would work like this:

xTable.row.add(d.data[0]);

No quotes around the 0 and removal of .key and the outer [] to get the full object.

Since its an array which could have one or more objects you could try rows.add() to add all the rows in the array. For example: xTable.rows.add(d.data).draw()

You can add .draw() to the end of row.add() for one line of code instead of two.

Kevin

ljr1981

Thanks again, Kevin!

I had attempted to use just the

d.data[0]

(but with quotes as you noted) So, this is my JS-neophyte-ness coming through. I just need to get more involved with JS. Thanks for the pointers.

As for multiple rows within the returning object—excellent point as well.

I presume from your feedback that the add feature will scan the objects in the Array, find them, and then start scanning each Object for the fields that match the table by name, yes?

ljr1981

So, the whole thing now becomes:

      function( d ) {
        var xTable = $('#example').DataTable();
        xTable.rows.add(d.data).draw();
        }

Thanks for the very excellent feedback. I am learning!