JSONP and AJAX
JSONP and AJAX
Hello Allan,
I have been trying to use the DataTable plugin(JSONP). I hope you can help me with my problems.
I have very little experience with jQuery and dataTables. The table is not getting filled with data.
I have followed the instructions on this page:
http://www.datatables.net/release-datatables/examples/server_side/jsonp.html
HTML Code:
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Loading data from server
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
-------------------
JavaScript Code:
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://localhost:53384/PsNetBFW.ashx?CITY=ABC&Debug=Y",
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"type":"POST",
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
} );
JSON that WebService is returning when I look at FireBug:
{ "aaData":[{"MAST_TRNR":"Test","LOCATION":"QA Univ","ADDRESS1":"ABC, APT 401","PHONE":"111-211-1132","CITY":"Sterling","STATE":"VA","ZIP":"11111","COUNTRY":"USA"}]}
SHOULD IT BE IN THE BELOW FORMAT WITH along with sEcho etc? Also should we include Callback function (ex: getData(jsonObject) ) too while returning from the Webservice or will it be taken care by the plugin if we just return the JSON object?
({sEcho:1, iTotalRecords:"57", iTotalDisplayRecords:"57", aaData:[["Gecko", "Firefox 1.0", "Win 98+ / OSX.2+", "1.7", "A"], ["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A"], ["Gecko", "Firefox 2.0", "Win 98+ / OSX.2+", "1.8", "A"], ["Gecko", "Firefox 3.0", "Win 2k+ / OSX.3+", "1.9", "A"], ["Gecko", "Camino 1.0", "OSX.2+", "1.8", "A"], ["Gecko", "Camino 1.5", "OSX.3+", "1.8", "A"], ["Gecko", "Netscape 7.2", "Win 95+ / Mac OS 8.6-9.2", "1.7", "A"], ["Gecko", "Netscape Browser 8", "Win 98SE+", "1.7", "A"], ["Gecko", "Netscape Navigator 9", "Win 98+ / OSX.2+", "1.8", "A"], ["Gecko", "Mozilla 1.0", "Win 95+ / OSX.1+", "1", "A"]]})
Actually I was trying with .getJSON initially which was not working either, so changed it to the above.
Thank you in advance.
Dev
I have been trying to use the DataTable plugin(JSONP). I hope you can help me with my problems.
I have very little experience with jQuery and dataTables. The table is not getting filled with data.
I have followed the instructions on this page:
http://www.datatables.net/release-datatables/examples/server_side/jsonp.html
HTML Code:
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Loading data from server
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
-------------------
JavaScript Code:
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://localhost:53384/PsNetBFW.ashx?CITY=ABC&Debug=Y",
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"type":"POST",
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}
} );
} );
JSON that WebService is returning when I look at FireBug:
{ "aaData":[{"MAST_TRNR":"Test","LOCATION":"QA Univ","ADDRESS1":"ABC, APT 401","PHONE":"111-211-1132","CITY":"Sterling","STATE":"VA","ZIP":"11111","COUNTRY":"USA"}]}
SHOULD IT BE IN THE BELOW FORMAT WITH along with sEcho etc? Also should we include Callback function (ex: getData(jsonObject) ) too while returning from the Webservice or will it be taken care by the plugin if we just return the JSON object?
({sEcho:1, iTotalRecords:"57", iTotalDisplayRecords:"57", aaData:[["Gecko", "Firefox 1.0", "Win 98+ / OSX.2+", "1.7", "A"], ["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A"], ["Gecko", "Firefox 2.0", "Win 98+ / OSX.2+", "1.8", "A"], ["Gecko", "Firefox 3.0", "Win 2k+ / OSX.3+", "1.9", "A"], ["Gecko", "Camino 1.0", "OSX.2+", "1.8", "A"], ["Gecko", "Camino 1.5", "OSX.3+", "1.8", "A"], ["Gecko", "Netscape 7.2", "Win 95+ / Mac OS 8.6-9.2", "1.7", "A"], ["Gecko", "Netscape Browser 8", "Win 98SE+", "1.7", "A"], ["Gecko", "Netscape Navigator 9", "Win 98+ / OSX.2+", "1.8", "A"], ["Gecko", "Mozilla 1.0", "Win 95+ / OSX.1+", "1", "A"]]})
Actually I was trying with .getJSON initially which was not working either, so changed it to the above.
Thank you in advance.
Dev
This discussion has been closed.
Replies
yes. server side processing (bServerSide: true) requires it: see http://www.datatables.net/usage/server-side
The link you provided was very helpful. I saw it earlier but didn't read it completely. that was my mistake. I could demo something in time due to your quick and accurate response. Thanks you again :-)