datatables 1.10 add.row() not working within ajax response

Question

Using a datatables 1.10 with dom created table. I am attempting to add a new row of data within an ajax response yet nothing happens. The same code by itself (no ajax) works perfectly fine. Yes, the response.success is returning 'true'.

// this works and adds the new row to the table

$('#test').on('click', function () {
    dt.row.add( [
        'td0',
        'td1',
        'td2',
        'td3'
    ] ).draw();
});

//same code does not work within an ajax response...

$('#dtCreate').on('click', function () {

    $.ajax({
        type: 'post',
        url: '/test/process/p_db_create.php'
    }).done(function (response) {

        //double check response
        console.log(response);

        if (response.success)
        {
            //add the row since this is not serverside
            dt.row.add( [
                'td0',
                'td1',
                'td2',
                'td3'
            ] ).draw();
                ...more code below...

Answer 1

the td should be initiated by DataTable() not dataTable(). I ran into this problem and wasted my good few hours.