Load a new Dyntable over a previous one without reloading the page

Question

I've been reading a bunch and cannot seem to figure this one out. Can anyone tell me if there is a way to load a new dynatable from an AJAX call? I'm using laravel and in the blade if you click a submit button it goes to this function:

function adminXconnectAjax (value) {
var newValue = JSON.parse(value);
console.log("ajax route is hit, waiting for a response");
$.ajax({
    type: 'GET',
    url: '/xconnectadmin/',
    data: {
        xconnect: newValue
    },
    dataType: 'json',
    success: function (data) {
    console.log(data);
    $("thead").show();
    $('#adminXconnectTable').dynatable({
        features: {
            pushState: false,
        },
        dataset: {
            ajax: false,
            records: data,
        },
    }).data('dynatable');
},  
    error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    }
});

}

So I am hoping that whenever you click the submit button we can load different data into the dynatable and delete/lose the old one.
Any ideas?

Answer 1

Ended up using bootstrap tables. I built the table out in js and appended it to the DOM so everytime it calls the table it destroys the previous one and creates a new one to be displayed.