How to refresh table using jQuery AJAX call

chrismv48

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

            }
        });
    });
});

chrismv48

I figured it out. Modifying the success function of the ajax calls as follows worked:

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

                    table_config.columns = response.columns;

                    var table = $('#table-output').DataTable(table_config);
                    table.clear();
                    table.rows.add(response.data);
                    table.draw();

                }