Datatables and Cross Domain AJAX

venht001

Hi Allan,

First of all great plugin.

I hope you can help me with my problem.
I have little experience with datatables and jQuery. So if I am stating the obvious please excuse me.

I have taken your example http://datatables.net/examples/server_side/server_side.html
And tried to replicate this for my own use.

The only difference being that the server from which the data is pulled is a different one than the one that is hosting the page.
I think that might be the reason that I am not getting the data loaded in the table.
My question is if that is the case, has datatables a way of dealing with cross domain calls.
I know this is possible using jquery and Json, if have done that, but how to do this with datatables puzzles me.

If you need additional info please let met know.

Thanks in advance.


My code without datatables
[code]
$(document).ready(function(){
jQuery.getJSON(dblocation + "wqsGetData?openagent&action=" + formnaam1 + parameterstr + "&callback=?",
function(data) {
if (data.error){alert(data.error);return false;}
$(tabel1plaatsinid).html(''+ data.gegevens).show();
}
);
}
);
[/code]

My code with datatables
[code]



var oTable;
var notesData;
$(document).ready(function(){

$('#tabelletje2').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://dev007-almere/ssob/m-r/mijnleaseauto.nsf/wqsGetDatanw?openagent&action=BRANDST"
} );
});

function fnFormatDetails ( nTr )
{
var i = nTr.id.lastIndexOf("_");
sOut = notesData.details[nTr.id.substr(i+1)];
return sOut;
}


function addDetailListener (tableid) {
oTable = $(tableid).dataTable();
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}



var debug = true;
jQuery.extend({
log: function(msg) {
if (debug) {
if (window.console) {
// Firefox & Google Chrome
console.log(msg);
}
else {
// Other browsers
$("body").append("" + msg + "");
}
return true;
}
}
});











K1
K2
K3





Loading data from server





K1
K2
K3





[/code]


Errors
json is null

Line 2751

The error I see in Firebug on the script tab

json is null

Line 2751

And on the console tab

uncaught exception: [Exception... "'[JavaScript Error: "json is null" {file: "http://lpnlsql1001:8142/mijnleaseauto/jquery.dataTables.js" line: 2751}]' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x80570021 (NS_ERROR_XPC_JAVASCRIPT_ERROR_WITH_DETAILS)" location: "native frame :: :: :: line 0" data: yes]

Line 0

Json which is returned from the server

{"sEcho": 1, "iTotalRecords": 58, "iTotalDisplayRecords": 58, "aaData": [ ["24071991","01-01-2004","0"], ["24071991","01-02-2004","0"], ["24071991","01-03-2004","0"], ["24071991","01-04-2004","0"]]}

gutzofter

Are you saying that the browser actually received the json from the server? I don't believe that this is possible with a standard ajax request. The reason I ask this is that if your ajax request is cross-site then you will need to override dataTables ajax function and change the datatype of the request to jsonp.

See this for overriding Ajax call:
http://datatables.net/examples/server_side/post.html

And this for jQuery $.ajax and Jsonp:
http://api.jquery.com/jQuery.ajax/

Remember to look up dataType on this page.

allan

I agree with gutzofter. If you have a look at fnServerData ( http://datatables.net/usage/server-side#fnServerData ) you have have DataTables use whatever Ajax command you want. So you can specify 'jsonp' as the data type if you wish, and use that to have DataTables draw your data.

My understanding of jQuery's jsonp support, is that it will take care of scoping for you - in fact, Javascript should do it due to it's use of closure - however, if it doesn't work the one thing that might be slightly difficult is the scope of the fnCallback function. This is the function that you want your callback to call with the new data - but since the callback is actually done by the remotely loaded data, what you will probably need to do is to assign the callback function to a global variable and call that. But... I think it should be okay :-)

Regards,
Allan