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()
    });

};  

});

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()
    });

};  

});

• javascript
• jquery
• ajax
• datatables

• success should look something like success: function(data){ ... } where data is the json passed in. – Ballbin Commented Jun 6, 2014 at 4:30
• did you check this answer here stackoverflow./questions/20141432/… – Sherif Commented Jun 6, 2014 at 4:32
• @Ballbin could you be more specific? My ajax url 'update.php' echos the JSON data but I don't know how to grab it. When the page initializes in the first section of code I don't do anything it just fills the table. – gback Commented Jun 6, 2014 at 15:05
• @Sherif I looked at that, it is using the older version of Datatables. I could try and destroy and rebuild the table using the new syntax but it doesn't seem like the right way. I am still learning but it SEEMS like there should be a way to update the table without destroying and rebuilding it every time. – gback Commented Jun 6, 2014 at 15:07
• @gback The data argument passed into the function will be the data that was passed back from update.php. – Ballbin Commented Jun 6, 2014 at 16:34

1 Answer 1

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();
};