Update the datatable properties with the json data ( ajaxcallback ) and redraw the table after
Update the datatable properties with the json data ( ajaxcallback ) and redraw the table after
I am improving with datatables but i need a bit of help.
Maybe i am wrong, but i didnt find datatables examples working with Json data ( from server side processing ) not being the default data ( sEcho, iTotalRecords, iTotalDisplayRecords, aaData, [aoColumns] ) like
[code]
var debug;
...
"fnServerData": function ( sUrl, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"url": sUrl,
"data": aoData,
"success": function (json) {
if ( json.sError ) {
oSettings.oApi._fnLog( oSettings, 0, json.sError );
}
$(oSettings.oInstance).trigger('xhr', [oSettings, json]);
// MYCODE a simple example, i pass sTitle ( Columns titles ) on the json
for (var property in json){
if ( property == "aoColumns"){
for (var aoColIndex in json["aoColumns"]){
oSettings["aoColumns"][aoColIndex]["sTitle"] = json["aoColumns"][aoColIndex]["sTitle"];
}
}
}
//oSettings.oApi._fnAjaxUpdateDraw( oSettings, json);
//oSettings.oApi._fnDraw( oSettings );
debug["oSettings"] = oSettings;
// ENDMYCODE it works but datatable isnt drawed
},
"dataType": "json",
"cache": false,
"type": oSettings.sServerMethod,
"error": function (xhr, error, thrown) {
if ( error == "parsererror" ) {
oSettings.oApi._fnLog( oSettings, 0, "DataTables warning: JSON data from "+
"server could not be parsed. This is caused by a JSON formatting error." );
}
}
} );
},
...
console.log( debug );
[/code]
I think i know how pass the json, with the new properties data, and change the datatable properties with the new one, but datatable isnt draw/printed/refreshed.
I follow the right steps ?
I will change this code for a function that allow me to parse data from json and store on datatable.oSettings.
[code]
for (var property in json){
if ( property == "aoColumns"){
for (var aoColIndex in json["aoColumns"]){
oSettings["aoColumns"][aoColIndex]["sTitle"] = json["aoColumns"][aoColIndex]["sTitle"];
}
}
}
[/code]
Maybe u can tell me if there is already a funtion to do this.
I checked JQuery.dataTables.js library and i found many functions and things there but didnt find a function to do this.
But dont know, maybe i didnt see it.
I am a bit lost. I need some advices to do this.
I found "fnDrawCallback" and "fnPreDrawCallback" but still dont get it :(
Maybe i am wrong, but i didnt find datatables examples working with Json data ( from server side processing ) not being the default data ( sEcho, iTotalRecords, iTotalDisplayRecords, aaData, [aoColumns] ) like
[code]
var debug;
...
"fnServerData": function ( sUrl, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"url": sUrl,
"data": aoData,
"success": function (json) {
if ( json.sError ) {
oSettings.oApi._fnLog( oSettings, 0, json.sError );
}
$(oSettings.oInstance).trigger('xhr', [oSettings, json]);
// MYCODE a simple example, i pass sTitle ( Columns titles ) on the json
for (var property in json){
if ( property == "aoColumns"){
for (var aoColIndex in json["aoColumns"]){
oSettings["aoColumns"][aoColIndex]["sTitle"] = json["aoColumns"][aoColIndex]["sTitle"];
}
}
}
//oSettings.oApi._fnAjaxUpdateDraw( oSettings, json);
//oSettings.oApi._fnDraw( oSettings );
debug["oSettings"] = oSettings;
// ENDMYCODE it works but datatable isnt drawed
},
"dataType": "json",
"cache": false,
"type": oSettings.sServerMethod,
"error": function (xhr, error, thrown) {
if ( error == "parsererror" ) {
oSettings.oApi._fnLog( oSettings, 0, "DataTables warning: JSON data from "+
"server could not be parsed. This is caused by a JSON formatting error." );
}
}
} );
},
...
console.log( debug );
[/code]
I think i know how pass the json, with the new properties data, and change the datatable properties with the new one, but datatable isnt draw/printed/refreshed.
I follow the right steps ?
I will change this code for a function that allow me to parse data from json and store on datatable.oSettings.
[code]
for (var property in json){
if ( property == "aoColumns"){
for (var aoColIndex in json["aoColumns"]){
oSettings["aoColumns"][aoColIndex]["sTitle"] = json["aoColumns"][aoColIndex]["sTitle"];
}
}
}
[/code]
Maybe u can tell me if there is already a funtion to do this.
I checked JQuery.dataTables.js library and i found many functions and things there but didnt find a function to do this.
But dont know, maybe i didnt see it.
I am a bit lost. I need some advices to do this.
I found "fnDrawCallback" and "fnPreDrawCallback" but still dont get it :(
This discussion has been closed.
Replies
Please Allan, take a look, is long but is well explained, is easy for u, just 2 questions at the end.
[code]
var debug = [];
$(document).ready(function() {
var oTable;
$('#dynamic').html('');
function initTabla( json )
{
debug['json'] = json;
oTable = $('#example').dataTable({
/*"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://gestionmimascota.loc/pedidos/cargaDatos",
"sServerMethod": "POST",*/
"aaData": json.aaData,
"aoColumns": json.aoColumns,
});
oTable.fnSettings().oFeatures.bProcessing = true;
oTable.fnSettings().oFeatures.bServerSide = true;
oTable.fnSettings().oFeatures.sAjaxSource = "http://gestionmimascota.loc/pedidos/cargaDatos";
oTable.fnSettings().oFeatures.sServerMethod = "POST";
debug['oTable'] = oTable;
}
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": "http://gestionmimascota.loc/pedidos/iniciaTabla",
"success": initTabla,
"error": function(){ alert("Error en la inicializacion de la tabla")}
} );
});
console.log( debug );
[/code]
I am doing out of datatable creation
[code]
...
oTable.fnSettings().oFeatures.bProcessing = true;
oTable.fnSettings().oFeatures.bServerSide = true;
oTable.fnSettings().oFeatures.sAjaxSource = "http://gestionmimascota.loc/pedidos/cargaDatos";
...
[/code]
because if u define these properties when u create the table
[code]
oTable = $('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://gestionmimascota.loc/pedidos/cargaDatos",
"sServerMethod": "POST",
"aaData": json.aaData,
"aoColumns": json.aoColumns,
});
[/code]
u get a double AJAX call
1 from
[code]
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": "http://gestionmimascota.loc/pedidos/iniciaTabla",
"success": initTabla,
"error": function(){ alert("Error en la inicializacion de la tabla")}
} );
[/code]
and other from _fnInitialise private datatable function that execute a Ajax call to get the data from the "sAjaxSource": "http://gestionmimascota.loc/pedidos/cargaDatos"
but the point is, i already sent it on the normal call
$.ajax( ...."url": "http://gestionmimascota.loc/pedidos/iniciaTabla", ... )
"aaData": json.aaData,
"aoColumns": json.aoColumns,
My question are
¿ i am focusing it in the right way ?
there are 2 ways to do it,
1.- send column and data info and draw the table with just 1 AJAX call like this example.
2.- send column info on first AJAX call to initialice datatable options and then another AJAX call to get the data from the server and draw the full datatable, so 2 AJAX call.
Are there big diference between both ways ? or i am getting crazzy ? xD
Sorry, i am relatively new on this.
I hope someone can answer to these questions and it be helpfull for others.
Ty.
No :-). Manipulating the settings object after initialisation is absolutely not supported, nor recommended unless you are really sure of what you are doing and know the DataTables code extremely well. I wrote it and would hesitate!
Secondly, if you are using DataTables in server-side processing mode, you don't need to make your own Ajax calls - DataTables will do them itself. Anything else will likely lead to a lot of confusion. Why do you want to do it the way you have? If you are using server-sid processing, you _must_ implement the protocol described here: http://datatables.net/usage/server-side
Allan
I need to inicialice aoColumns properties on the first call ( sEcho = 1 ). aoColumns properties depends of user so on first call, i sent aoColumns info. dont need to send it anymore.
Just need to send it if user privileges changes, like for example if an admin gave right to see a column he cant see before.
I will study how do this after, i will do it with timestam, saving it and checking if it changed on each call. If it changed, i have to resend the new aoColumns properties.
I tried to load aoColumns properties on the fnServerData call but i didnt get the titles painted.
Something was wrong.
Then i googled and saw this code, checked and worked. And all works fine now.
I dont know why do this is so hard, i think it is a simple, very used example. U need to show datatable with some diferent configurations, depending from some parameters, like for example, the aplications user, depending of his rights.
So on the first Ajax call, u send the aoColumns properties to show it rightly. And after u just have to send the filtered, paginated, ordered ... data.
I am surprised i still dont know do this.
http://datatables.net/forums/discussion/10455/changing-the-column-settings-dynamically-in-code/p1
[quote]allan said: it is just not a supported option to change configuration properties on-the-fly like this.[/quote]
[quote]allan said: you'd need to go through the DataTables source and see what the internal calls you would need to make (fnAdjustColumnSizing is a good place to start!).[/quote]
i was checking datatables source since 2 days ago and i am lost, i dont get the solution for my problem.