CODEWITHSUNDEEP
ajaxdatatables
ChrisArmstrong
ChrisArmstrong

Reputation: 2521

How to refresh JS datatables using AJAX

I am using AJAX to load (and subsequently refresh) a JS datatable (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() JS Datatables methods, but nothing seems to work.

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

            }
        });
    });
});

Upvotes: 2

Views: 1378

Answers (2)

ChrisArmstrong
ChrisArmstrong

Reputation: 2521

I figured it out. Modifying the success function as follows works:

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

                }

Upvotes: 1

user3209031
user3209031

Reputation: 835

You can try :

var table1 = $('#youtblename').DataTable();
var pathp = "/server_processing_pie.php";

tablel.clear();
tablel.draw();
tablel.ajax.url(pathp).load();

Upvotes: 0

Related Questions