rows.add() with javascript Json

rows.add() with javascript Json

Cugar15Cugar15 Posts: 7Questions: 3Answers: 0
edited September 2016 in Free community support

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

This question has accepted answers - jump to:

Answers

  • DirceuNazarethDirceuNazareth Posts: 44Questions: 1Answers: 12

    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.

  • Cugar15Cugar15 Posts: 7Questions: 3Answers: 0

    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);
    
    
  • DirceuNazarethDirceuNazareth Posts: 44Questions: 1Answers: 12
    Answer ✓

    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);
    
  • Cugar15Cugar15 Posts: 7Questions: 3Answers: 0

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • Cugar15Cugar15 Posts: 7Questions: 3Answers: 0

    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...

  • DirceuNazarethDirceuNazareth Posts: 44Questions: 1Answers: 12
    Answer ✓

    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...

  • Cugar15Cugar15 Posts: 7Questions: 3Answers: 0

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

This discussion has been closed.