CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
gback
gback

Reputation: 15

Updating Datatable with AJAX

I am working with Datatables with AJAX where I generate a table when the page loads. This first part of my code works fine. Based on user input I then want to update the table with new data.

Right now when I call the function updateTable() it returns the proper JSON for what I send it but I can't figure out how to actually update the table. The 'success' part is wrong but I am not sure what to do I have tried lots of api functions but nothing seems to work. Any help?

$(document).ready(function() {



var valve = "1-8000AL" //$("#valveSelect").val();
var tab = "1"
$('#dataTable').dataTable( {
    "scrollY":  "400px",
    "scrollCollapse": true,
    "paging": false,

    "ajax": {"url": "ajax/update.php","data": {"valve" : valve, "tab" : tab}},
    "dom": '<"top">rts<"bottom"filp><"clear">'
}); 



function updateTable(){

    var valve = $("#valveSelect").val();
    var tab = "2" 
    $('h3').text(tab);
    $.ajax({
        url: "ajax/update.php",
        data:{"valve" : valve, "tab" : tab},
        success: $('#dataTable').dataTable().draw()
    });

};

});

Upvotes: 0

Views: 13546

Answers (1)

ZenCodr
ZenCodr

Reputation: 1175

First of all, use .DataTable to construct your datatable, not .dataTable. .DataTable is the new style from datatables 1.10. .DataTable returns a DataTables api instance, while .dataTable returns a jquery object.

The solution I use is to construct the query string manually (using $.param()), and then use the datatables API to reload the data from the new location.

function updateTable(){
    var valve = $("#valveSelect").val();
    var tab = "2"
    var query_string = $.param({"valve" : valve, "tab" : tab})
    var ajax_source = "ajax/update.php?" + query_string
    var table = $("#dataTable").DataTable(); // get api instance
    // load data using api
    table.ajax.url(ajax_source).load();
};

Upvotes: 1

Related Questions