Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataTables - _fnAjaxDataSrc - Cannot read property 'length' of undefined

When I further check debugging and I found that it does passing the json data, here are the screen shots of debugging.

enter image description hereenter image description hereenter image description hereDemo PLNKR

<html>
<head>
  <link 
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
  <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body>
  <table id="myDataTable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>primaryGenreName</th>
        <th>country</th>    
      </tr>
    </thead>
    <tbody>
    </tbody>
</body>
</html>
like image 574
Nick Kahn Avatar asked Jan 19 '15 21:01

Nick Kahn


1 Answers

You are mixing old legacy datatables api with new version of datatables.

Use new API:

  • AJAX
  • DATA format

I didn't manage to use "Demo PLNKR" example due to cross domain policy of that JSON data source :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://itunes.apple.com/search?term=apple&_=1421706895095. This can be fixed by moving the resource to the same domain or enabling CORS.

At the end my advice is to :

Change sAjaxSource to ajax , aoColumns to columns, mData to data...

Take care of JSON format Ajax response that you are getting, map that properly with data column field example. If you are using itunes result it will be something like this :

"ajax": {
    "url" : "https://itunes.apple.com/search?term=apple",
    "dataSrc" : "results"
},
"columns": [
 {"data": "artistName"},
 {"data": "collectionName"},
 {"data": "trackName"},
 {"data": "collectionCensoredName"},
 {"data": "trackCensoredName"},
 {"data": "artistViewUrl"},
 ...
]
like image 136
Nikola Loncar Avatar answered Nov 19 '22 04:11

Nikola Loncar