rows.add() with javascript Json

Cugar15

Hello, I'm trying to load data from a javascript generate json object. Unfortunately, nothing happens and data is not loaded.
If the json data is added into a file and used via the ajax call, then the data is loaded just fine.

javascript:

modul='123';
var text='{"data" : [' +
 '{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"},' +
 '{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}]}';
var data = JSON.parse(text);

console.log(jQuery('#'+modul).DataTable().rows.add(data).draw());

I have set the columns definition:

"columns": [
                    { "data": "param1"},
                    { "data": "param2"},
                    { "data": "param3"},
                    { "data": "param4"}
        ],          

Working object.txt with: "ajax": "/objects.txt",

{"data":[
    {"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"},
    {"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}]}

The data is obviously parsed. I got some index mismatches before. All that is resolved..

Here is the example: http://live.datatables.net/gureleve/1

What am I missing??

Thanks

DirceuNazareth

Not sure if that it will solve your problem, but few comments...

I notice that you starting you DataTable incorrectly, at least in the JS Bin, the typo is dataTable instead of DataTable.

In your snippet you are reinitialize the DT, instead of use the already initialized table. To reuse the instance of DT to add data you should save the table in a variable, like rows.add():

var table = $('#example').DataTable();
 
table.rows.add( [ {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    }, {
        "name": "Garrett Winters",
        "position": "Director",
        "salary": "$5,300",
        "start_date": "2011/07/25",
        "office": "Edinburgh",
        "extn": "8422"
    } ] )
    .draw();

Note, instead of parse the JSON, since your are in the JS, you should use as argument to the add() the array of objects.

Cugar15

Thanks for your comments. I will incorporate these..

However, using an array, rows.add() does not seem to be happy at all:

Here is how I do it for simplicity reason - maybe, it's wrong...

var text1='{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}';
var text2='{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}';
var data = new Array(text1, text2);

DirceuNazareth

Unfortunately yes. it is wrong.

your code generates 2 strings inside of an array.

just remove the single quotes.

http://live.datatables.net/gureleve/5/edit

Also you have some erros in your initilization, so I comment it out.

//your code returns [string, string]

//this code below returns [object, object]
var text1={"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"};
var text2={"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"};
var data = new Array(text1, text2);

Cugar15

Hello, thanks a ton - obvious....

Since I'm receiving JSON from the server, I experimented again with JSON.
What seems to work is, if the data attribute is eliminated.
So, the following works as well:

var text='[{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"},{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}]';
data = JSON.parse(text);
console.log(data);
console.log(table.rows.add(data).draw());

However, one more question. You are recommending to reference the created table variable. Not sure how to do this. The js code is part of an ajax call back and in this callback, the var table is not known.

So, how can I reference the table without initializing again?
In another forum entry I read, that DataTables will not redraw and existing table.
Is there really a performance penalty?

allan

Are you able to show us a dump of the code you are working with please? I'm not entirely clear where it is that you want to use the DataTables instance.

Allan

Cugar15

Well, I cannot show a dump - too much code. But I can outline the structure.

<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
jQuery(document).ready(function() {
 
     table= jQuery('#<?php echo $module->id  ?>').DataTable({
.....
    });
        
} );
</script>

Next, there is a ajax call back in javascript.
Ideally, I think, it is suggested to use table as below - but table is not defined in this function.

function(json){
 table.clear;
  data=.....json...
 table.rows.add(data).draw();
   
}

My understanding is, that the variable table is local in both functions.
Usually, I would search for some elementId on the webpage to manipulate data there...

DirceuNazareth

It is more about scope. Since a dump of your code would be complicated, I will answer based on my way to code.

//myVariables is the namespace that I append to the global scope of JS
var myVariables = {};


jQuery.noConflict();
jQuery(document).ready(function() {
     //you don't need to use var here, because myVariables is in the global scope.
     myVariables.table =  jQuery('#<?php echo $module->id  ?>').DataTable({
          .....
      });
} );

function(json){
 table.clear;
  data=.....json...
 myVariables.table.rows.add(data).draw();
}

In this case the DT api instance will be accessible because it is appended to the namespace myVariables, which is linked to the global JS scope.

That my preference, but you can also use the JQuery.data() like:

jQuery.noConflict();
jQuery(document).ready(function() {
     var JQueryTable  =  jQuery('#<?php echo $module->id  ?>');
     JQueryTable.data("myDataTable", 
          JQueryTable.DataTable({
              .....
          });
      )
} );

function(json){
 table.clear;
  data=.....json...
  jQuery('#<?php echo $module->id  ?>').data("myDataTable").rows.add(data).draw();
}

You may find even more ways to accomplish this...

Cugar15

Very clear - define a global variable...
Thanks for helping out!