Datatables plugin error Uncaught TypeError: Cannot read property 'mData' of undefined

I am using the jQuery Datatables plugin. Pagination was not working so I tried to initialise the datatable after appending my rows using ajax/jQuery in the hopes that once all the rows are added and datatables is then initialised, it would work. But I am getting an error:

 "Uncaught TypeError: Cannot read property 'mData' of undefined."

I just want pagination to work, so I am not even sure if this is the right approach for that when the rows are added via jQuery.

HTML

<table id="table" class="table-striped" style="width:100%">
    <thead>
        <tr>
        <td>Date</td>
        <td>Route</td>
        <td></td>
        </tr>
    </thead>
    <tbody id="tablebody">
    </tbody>
</table>

jQuery

function loadfromDB(event) {
var uid = $('#uid').val();

        $.ajax({
            type: "POST",
            url: "getplans.php",
            data: {uid:uid},
            dataType: 'json',
            cache: false,
        })
        .success(function(response) {
            $('input').removeClass('error').next('.errormessage').html('');
            if(!response.errors && response.result) {
                 $.each(response.result, function( index, value) {
                   $("#tablebody").append('<tr><td>'+value[4]+'</td><td>'+value[2]+'</td><td>'+value[3]+'</td></tr>');

                  }); 
             $('#table').DataTable();
            } 

            else {
                $.each(response.errors, function( index, value) {
                    // add error classes
                    $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
                });
            }
        });

}   


ANSWERS:


Check your table structure, make sure table header is same to table cell.

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>table cell 1</td>
            <td>table cell 2</td>
            <td>table cell 3</td>
        </tr>
    </tbody>
<table>

  1. you can build your datatables using ajax as a data source (I wont write about it, it is well documented on the datatables siet, please view it there).

  2. adding data AFTER the init. is simple. i show u an example:

var myTable = $('#myTableId').DataTable({ /*... set up options here */ });

a) make sure u return a valid JSON from the server, CORRESPONDING withe input your datatbles expect b) modif. the ajax request to recive and parse JSON c) in the SUCCESS callback of the response:

    // this 2 lines to recive and parse JSON
    dataType: 'json',
    contentType: "application/json",

    success: function(json) {

     // first, empty the table:
     myTable.clear();

     // add the data and redraw the table:
     myTable.rows.add(json).draw();


    }


 MORE:


 ? Uncaught TypeError: Cannot read property 'mData' of undefined
 ? DataTables: Uncaught TypeError: Cannot read property 'mData' of undefined
 ? Uncaught TypeError: Cannot read property 'mData' of undefined at jquery.dataTables.yadcf.min.js
 ? Uncaught TypeError: Cannot read property 'next_page' of undefined
 ? Uncaught TypeError: Cannot read property 'textContent' of undefined
 ? Vue Resource - Post multiple data
 ? Vue Resource - Post multiple data
 ? Vue Resource - Post multiple data
 ? Laravel 5 database query retrieve first table data but not in other table
 ? Laravel 5 database query retrieve first table data but not in other table