refresh data table

eswanzey

The following code works well - a datatable is populated with data from a simple ajax call when a page loads. Except there is one problem. I'm trying to refresh the dataTable #nearme with new data when there is a selection change on the #radios radio buttons. As it stands, the "cannot reinitialise data table" error gets thrown on the change event and I can't figure out how to code for that event. Any assistance would be appreciated.

$(function () {
    $('#radios input[type=radio]').change(function(){
      navigator.geolocation.getCurrentPosition(showLocation);
    })
})

if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showLocation);
    }
    else { 
    alert('Geolocation non supported..');
    }

    function showLocation(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        //console.log(lat);
        //console.log(lng);
        var radial_value = $('.optradio:checked').val();
$('#nearme').dataTable( {
    "ajax": {
    "type": "GET",
    "headers": {"x-ebirdapitoken": "mytoken"},
    "url": "https://ebird.org/ws2.0/data/obs/geo/recent/notable?lat=" +lat+ "&lng=" +lng+ "&detail=simple&back=7&dist=" +radial_value,
    "dataSrc": ""
  },

   "columns": [
            { "data": "lng", "class":"lng small" },
            { "data": "lat", "class":"lat small" },
            { "data": "locName", "class":"link" },
            { "data": "comName" },
            { "data": "howMany", "class":"small" },
            { "data": "obsDt", "class":"small link" }
        ]
} );
    $('#nearme tbody').on( 'click', 'td.link', function () {
    var lng = $(this).prevAll(".lng").text();
    var lat = $(this).prevAll(".lat").text();
    //var lat = $(this).prev('.lat').text();
    var url = 'http://maps.google.ca/maps?f=d&daddr='+lat+','+ lng+ '&z=8';
    window.open ( url, '_blank');
} );
    }

getalex

You'll need to subscribe the underlying data to change events depending what framework you're using.

you can update the parameters and try to call the draw() function on the table instance provided you stored it in a variable as below, or can get to it via jQuery selector.

var dt = $('#example').DataTable( ... );
// make changes
dt.draw();

eswanzey

Thanks for pointing me in the right direction! Was simple enough to set the dt.ajax.url and call dt.ajax.reload() to refresh the data set.