Problem with Datatables "sajaxSource" and "fnServerData" used together.
Problem with Datatables "sajaxSource" and "fnServerData" used together.
Hello Everyone, i am having lot of trouble trying to achieve pagination with ajax call for each page.
here is what i am doing
i created a simple widget to test datatable's "fnserverdata" and "sajaxsouce". Valid json id coming from server (if i don not use fnserverdata, i can see everything working properly.)
I get error in datables js where it says (can't get length on some property and is not able to render data to the table.)
Could you plz help.
I have debugged and can see correct params being passed in "mDataProps" to the table.
$.widget("mywidget", {
_create: function() {
},
_init: function() {
var widget = this;
var searchParams = this.options.searchParams;
this.config =
{
"bPaginate":true,"bServerSide":true,
"sAjaxSource":"/norad/searchwithoptions","bDestroy":true,"bRetrieve":true,"bLengthChange":false,
aoColumns:widget._getColumnDefs(),
"fnServerData":function(sSource,aoData,fnCallback) {
// i see url getting hit on server side with correct params and valid json being returned.
$.ajax({
"dataType":"json",
"type":"POST",
"contentType": "application/json; charset=utf-8",
"url":"url on my server side",
"data":searchParams,
"success":fnCallback,
"error": function(jqXHR, textStatus, errorThrown) {
console.log(txtStatus, errorThrown); //
}
});
}
}
this.element.dataTable(this.config);
},
//dynamically getting the columndefinitions for the table.
_getColumnDefs: function() {
var colDefs = [];
this.element.find("th").each(function() {
colDefs.push({"mDataProp":$(this).attr('data-key')});
});
return colDefs;
},
});
here is what i am doing
i created a simple widget to test datatable's "fnserverdata" and "sajaxsouce". Valid json id coming from server (if i don not use fnserverdata, i can see everything working properly.)
I get error in datables js where it says (can't get length on some property and is not able to render data to the table.)
Could you plz help.
I have debugged and can see correct params being passed in "mDataProps" to the table.
$.widget("mywidget", {
_create: function() {
},
_init: function() {
var widget = this;
var searchParams = this.options.searchParams;
this.config =
{
"bPaginate":true,"bServerSide":true,
"sAjaxSource":"/norad/searchwithoptions","bDestroy":true,"bRetrieve":true,"bLengthChange":false,
aoColumns:widget._getColumnDefs(),
"fnServerData":function(sSource,aoData,fnCallback) {
// i see url getting hit on server side with correct params and valid json being returned.
$.ajax({
"dataType":"json",
"type":"POST",
"contentType": "application/json; charset=utf-8",
"url":"url on my server side",
"data":searchParams,
"success":fnCallback,
"error": function(jqXHR, textStatus, errorThrown) {
console.log(txtStatus, errorThrown); //
}
});
}
}
this.element.dataTable(this.config);
},
//dynamically getting the columndefinitions for the table.
_getColumnDefs: function() {
var colDefs = [];
this.element.find("th").each(function() {
colDefs.push({"mDataProp":$(this).attr('data-key')});
});
return colDefs;
},
});
This discussion has been closed.
Replies