DataTables：Uncaught TypeError：无法读取未定义的属性“错误”

Question

Here's my HTML:

<table id="mens-clubs" class="display" cellspacing="0" role="grid" data-page-length="50">
    <thead>
        <tr>
            <th width="0">ID</th>
            <th width="20%">Club</th>
            <th width="20%">City</th>
            <th width="20%">State</th>
            <th width="20%">Metro</th>
            <th width="20%">Union</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th width="0">ID</th>
            <th width="20%">Club</th>
            <th width="20%">City</th>
            <th width="20%">State</th>
            <th width="20%">Metro</th>
            <th width="20%">Union</th>
        </tr>
    </tfoot>
    <tbody></tbody>
</table>

Here's my JS:

$(document).ready(function() {
    $('#mens-clubs').DataTable({
        'ajax': {
            'url': '/my/data/path/src.php',
            'dataSrc': 'data'
        },
        'columns': [
            { 'data': 'id' },
            { 'data': 'clubName' },
            { 'data': 'city' },
            { 'data': 'state' },
            { 'data': 'metroArea' },
            { 'data': 'unionName' }
        ],
        'processing': true,
        'dom': '<"row"<"small-24 column"B>><"row"<"large-8 columns"<"row filter-wrapper"<"columns small-24"f>>><"large-16 columns right"p>>' + 't' + '<"row"<"small-24 columns"p>>',
        'buttons': [ 'copy', 'excel', 'csv', 'pdf', 'print' ],
        'searching': true,
        'language': {
            'search': '',
            'searchPlaceholder': 'Search Clubs'
        },
        'pagingType': 'full_numbers',
        'scrollY': '50vh',
        'scrollCollapse': true,
        'deferRender': true
    });
});

Here are the contents of my src.php file:

{
  "data": [{
    "id": "3",
    "clubName": "Alpha Steelers",
    "city": "Alpha",
    "state": "UT",
    "metroArea": "",
    "unionName": "Rocky Mountain"
  }, {
    "id": "5",
    "clubName": "Beta of Aspen",
    "city": "Beta",
    "state": "CO",
    "metroArea": "",
    "unionName": "Rocky Mountain"
  }, {
    "id": "6",
    "clubName": "Gamma Highlanders",
    "city": "Gamma",
    "state": "CO",
    "metroArea": "",
    "unionName": "Rocky Mountain"
  }]
}

My data file is successfully retrieved via GET every time, however, I get this error immediately following it's successful retrieval:

Uncaught TypeError: Cannot read property 'error' of undefined

The line the error references inside DataTables.js is 79406. It is inside the _fnBuildAjax() function and is as follows:

Has anyone ever come across this error or have any idea what this error is referring to? I've run my src.php file through JSONLinter and it is valid. Any help would be greatly appreciated.

Answer 1

Your json feed is missing some info. Jquery will send down a "draw" number and that needs to be fed back. You need the total and filtered as well as the data.

$complete = array("draw" => $this->request->query['draw'],
            'recordsTotal' => $total,
            "recordsFiltered" => $filtered,
            "data" => $output);