Quantcast
Channel: Free community support — DataTables forums
Viewing all articles
Browse latest Browse all 35272

How to refresh table using jQuery AJAX call

$
0
0

I am using AJAX to load (and subsequently refresh) a table (using v1.10.0). I don't think I'm doing this properly because while I can get the initial table to load, subsequent AJAX requests do not update the table.

I've tried various combinations of the .clear(), .draw() and .rows.add() methods, but nothing seems to work.

Code below:

$(document).ready(function() {

    $('#results').html('<table id="table-output" class="display" cellspacing="0" width="100%"></table>');

    var table_config = {
        "bDestroy": true,
        "paging": false,
        "language": {
            "zeroRecords": "No results found",
            "processing": "<div align='center'><img src='/static/ajax-loader.gif'></div>",
            "loadingRecords": "<div align='center'><img src='/static/ajax-loader.gif'></div>"
        }
    };       

    $("form").submit(function(e) {

        e.preventDefault();

        var form_data = JSON.stringify($(this).serializeArray());

        $.ajax({
            type: 'POST',
            url: /the_url,
            data: form_data,
            contentType: 'application/json',
            dataType: 'json',
            success: function(response) {

                table_config.data = response.data;
                table_config.columns = response.columns;

                $('#table-output').dataTable(table_config);

            }
        });
    });
});

Viewing all articles
Browse latest Browse all 35272

Trending Articles