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.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>
You are mixing old legacy datatables
api with new version of datatables.
Use new API:
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"},
...
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With