Question

148

Updating Datatable with AJAX

rated 0 times [ 154] [ 6] / answers: 1 / hits: 12545 / 10 Years ago, fri, june 6, 2014, 12:00:00

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<bottomfilp><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()

    });



};

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mackenzihannal

Add To Favorites

Follow

Total Points: 548

Total Questions: 96

Total Answers: 96

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

answered 10 Years ago lucianod · Accepted Answer

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

};