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

ChemonChemon Posts: 19Questions: 0Answers: 0
edited December 2012 in General
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 :(

Replies

  • ChemonChemon Posts: 19Questions: 0Answers: 0
    edited December 2012
    Ok, i think i am on the right track.
    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.
  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    > ¿ i am focusing it in the right way ?

    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
  • ChemonChemon Posts: 19Questions: 0Answers: 0
    edited December 2012
    Yes yes Allan, i need to learn.

    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.
This discussion has been closed.