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>
-
I can't find that
_fnAjaxDataSrcfunction 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
3 Answers
Reset to default 5You 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": [...]}.