Updating Datatable with AJAX

Question

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

};

});

success should look something like `success: function(data){ ... }` where `data` is the json passed in. — Ballbin, Jun 06 '14 at 04:30
did you check this answer here http://stackoverflow.com/questions/20141432/refresh-jquery-datatable-table — Sherif, Jun 06 '14 at 04: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, Jun 06 '14 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, Jun 06 '14 at 15:07
@gback The `data` argument passed into the function will be the data that was passed back from `update.php`. — Ballbin, Jun 06 '14 at 16:34

ZenCodr · Accepted Answer · 2014-06-10T15:11:21.880

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

edited Jun 10 '14 at 15:11

answered Jun 07 '14 at 04:05

ZenCodr

1,176
8
12

This is close! Quick thing: $.params should be $.param I think. The bigger issue I am having is that this is adding valve and tab to the query string twice. The first is the new values I selected but then the default values are added on as well, not sure why. EX: ajax/update.php?valve=1-8100&tab=2&valve=1-8000AL&tab=1&_=1402334290466 – gback Jun 09 '14 at 17:15
Do you have two elements with an id '#valveSelect' on your page? If yes, either cleanup your DOM id creation, or use something like $("#valveSelect").last().val() or $("#valveSelect").first().val() instead. This is a separate issue from your original question. – ZenCodr Jun 10 '14 at 15:17
I just tried commenting out the ajax request from the datatable initialization and replaced it with a call to the updateTable function to load the default data that way and everything works. The issue had something to do with that first ajax statement. Not really sure why. – gback Jun 11 '14 at 15:32

Updating Datatable with AJAX

1 Answers1