I am encountering an issue while using DataTables with an AJAX endpoint. When I initialize the datatable on my site, I consistently receive an error message stating "Cannot read property 'length' of undefined". I have attempted to troubleshoot this code without success
Here is the JSON result from the request
{
"data": [
{
"id": "28",
"id_transaction": "xxxxxxxxxxxxxxxxx",
"code": "xxxxxxxxxxxxxxxxxxxxx",
"code_id": "xxx",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f777777777777777777774f603d217f63">[email protected]</a>",
"status": "In Progress",
"xxyy": "10",
"xxyya": "xxxxxxx",
"xxaa": "xxxxxxx",
"xxx": "xxxxxxxxx",
"created_at": "2019-05-01 20:51:31"
},
{
...
Here is the configuration of the datatable
var mytable = jQuery('#Transactions').dataTable( {
ajax: {
url: '<?php echo admin_url( 'admin-ajax.php' ) ?>',
type: 'POST',
data: {action:'get_transactions'},
dataSrc: ''
}
columns: [
{"data": "id"},
{"data": "id_transaction"},
{"data": "code"},
{"data": "code_id"},
{"data": "email"},
{"data": "status"},
{"data": "xxyy"},
{"data": "xxyya"},
{"data": "xxaa"},
{"data": "xxx"},
{"data": "created_at"}
]
} );
Here is the HTML for the table
<table id="Transactions" class="display" style="width:100%">
<thead>
<th>ID</th>
<th>ID Transaction</th>
<th>Code</th>
<th>Code ID</th>
<th>Email</th>
<th>status</th>
<th>xxyy</th>
<th>xxyya</th>
<th>xxaa</th>
<th>xxx</th>
<th>created_at</th>
</thead>
<tbody>
</tbody>
<tfoot>
<th>ID</th>
<th>ID Transaction</th>
<th>Code</th>
<th>Code ID</th>
<th>Email</th>
<th>status</th>
<th>xxyy</th>
<th>xxyya</th>
<th>xxaa</th>
<th>xxx</th>
<th>created_at</th>
</tfoot>
</table>
Can anyone provide insights into why this error is occurring?
Thank you
Wiktor