最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - DataTables - _fnAjaxDataSrc - Cannot read property 'length' of undefined - Stack Overflow

programmeradmin3浏览0评论

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

Demo PLNKR

<html>
<head>
  <link 
  <script data-require="jquery@*" data-semver="2.0.3" src=".0.3.min.js"></script>
  <script src=".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/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>

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

Demo PLNKR

<html>
<head>
  <link 
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery./jquery-2.0.3.min.js"></script>
  <script src="https://cdn.datatables/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./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>
Share Improve this question edited Jan 19, 2015 at 22:09 Nick Kahn asked Jan 19, 2015 at 21:24 Nick KahnNick Kahn 20.1k97 gold badges286 silver badges416 bronze badges 4
  • I can't find that _fnAjaxDataSrc function datatables src . Where is definition of that function? – Nikola Loncar Commented Jan 19, 2015 at 21:59
  • ver DataTables 1.10.4: line number 3019 – Nick Kahn Commented Jan 19, 2015 at 22:01
  • You are using 1.9.4 version in your example and there isnt definition for that function. :) – Nikola Loncar Commented Jan 19, 2015 at 22:04
  • ooops i'm sorry forgot to point to the correct one when I was creating a demo on plkr, let me correct but i'm using 1.10.4 on my local machine – Nick Kahn Commented Jan 19, 2015 at 22:05
Add a ment  | 

3 Answers 3

Reset to default 5

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./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./search?term=apple",
    "dataSrc" : "results"
},
"columns": [
 {"data": "artistName"},
 {"data": "collectionName"},
 {"data": "trackName"},
 {"data": "collectionCensoredName"},
 {"data": "trackCensoredName"},
 {"data": "artistViewUrl"},
 ...
]

I had exactly same problem. Fix for this issue is to set 'sAjaxDataProp' to "" (i.e. empty) if you directly want to bind array to your datatable. This is similar to setting datasrc = "" in ajax call.

In my case, all I needed to do was to set the "columns" parameter, as in the @Nikola Loncar answer, and define a key to the ajax return: Put all the resultant array inside "data" key. Example: {"data": [...]}.

发布评论

评论列表(0)

  1. 暂无评论