How to refresh JS datatables using AJAX

Question

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

            }
        });
    });
});

Are you sure the AJAX call is succeeding?

Slippery Pete
– Slippery Pete

2014-08-11 20:24:51 +00:00
Commented Aug 11, 2014 at 20:24 — Slippery Pete
– Slippery Pete, Commented Aug 11, 2014 at 20:24
Yep, checked the response in the browser.

ChrisArmstrong
– ChrisArmstrong

2014-08-11 21:15:55 +00:00
Commented Aug 11, 2014 at 21:15 — ChrisArmstrong
– ChrisArmstrong, Commented Aug 11, 2014 at 21:15

ChrisArmstrong · Accepted Answer · 2014-08-13 00:07:32Z

1

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

                }

answered Aug 13, 2014 at 0:07

ChrisArmstrong

2,5519 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3209031 · Accepted Answer · 2014-08-12 04:59:26Z

0

You can try :

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

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

answered Aug 12, 2014 at 4:59

user3209031

8331 gold badge14 silver badges39 bronze badges

1 Comment

ChrisArmstrong Over a year ago

this wouldn't work for me as you are using datatable's ajax method instead of jquery's (a requirement)

Collectives™ on Stack Overflow

How to refresh JS datatables using AJAX

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related