How do I reinitialize DataTables after every $.get function?

waldorfrhee

I have my own search bar that I've created that filters in my data.

function fetch(query) {
                $.get('api/data', { q: query, start: 0, limit: 50 }).then(function(response) {
                    var template = _.template($("#row").html());
                    $("#inv_data").html(template({data:data }));
                    if (typeof _table == 'undefined'){
                        _table = $('#inventory').DataTable({
                            "searching": false,
                            "autoWidth": false
                        })
                    } else {
                        console.log("re-intialize")
                        $("#inventory").fnDraw()
                    }
                })
            }

I want to reinitialize DataTables every time I do another $.get because of the filter.
If I do .fnDraw() the results of the search/filter only comes up on the first page of DataTables.

waldorfrhee

} else {
                        console.log("re-intialize")
                        _table.fnClearTable()
                    }

I have up to here that clears the table.
I haven't figured out a way to load the changed data.

waldorfrhee

function fetchData(query) {
                if (typeof _table == 'undefined'){
                    console.log("initialize")
                    $.get('api/data', { q: query, start: 0, limit: 9999 }).then(function(response) {
                        var template = _.template($("#data_row").html());
                        $("#inv_data").html(template({data: data}));
                        _table = $('#data_table').DataTable({
                            "searching": false,
                            "autoWidth": false,
                        })
                    })
                } else {
                    console.log("reintialize")
                    _table.destroy()
                    $.get('api/data', { q: query, start: 0, limit: 9999 }).then(function(response) {
                        var template = _.template($("#data_row").html());
                        $("#inv_data").html(template({data:data}));
                        _table = $('#data_table').DataTable({
                            "searching": false,
                            "autoWidth": false,
                        })
                    })
                }

Got it.
I hope this will help someone out.