Initializing a Jquery DataTable with a local array of arrays as datasource

Question

I'm trying to build a DataTable using the DataTables jquery plugin with my data sourced in an array of arrays, stored in a variable. I've reduced my code down to a near image of the example layed out in the "data-sources" example in the documentation.

Basically I just can't get it to work. Here's the gist of it:

$(document).ready(function() {

    $('#graphic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    console.log(tableData);

    $('#example').dataTable( { 
    "data": tableData,
    "columns": [
        {"title": "column1"},
        {"title": "column2"},
        {"title": "column3"}
        ]
    });

});

And my data looks like:

var tableData = [
  ["Bloom Energy","$230,749,470.00","23.60%"],
  ["Sharp","$101,269,745.00","10.30%"]};

Full CodePen right here: http://codepen.io/scottpham/pen/mkhvr

Clearly the version of DataTables cited in the example is a little out of date in terms of versioning, but I had hoped it would still be valid since I don't know where else to look.

last version of plugin you can grab here,cdn also

Kostia Mololkin
– Kostia Mololkin

2014-10-18 09:58:03 +00:00
Commented Oct 18, 2014 at 9:58 — Kostia Mololkin
– Kostia Mololkin, Commented Oct 18, 2014 at 9:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

~~you are using 1.9.4 but you need 1.10.*** version ,that's why don't work~~

Edit

i am so sorry,1.9.4 support source as array of array,you just initialaze not correct properties, you need aaData and aoColums,here working pen

$('#example').DataTable( { 
        "aaData": tableData,
        "aoColumns": [
            {"title": "column1"},
            {"title": "column2"},
            {"title": "column3"}
            ]
    });

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 18, 2014 at 9:27

Kostia Mololkin

72610 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toby Allen Over a year ago

Please try to elaborate as to why he need the later version, maybe a link to a version page.

Kostia Mololkin Over a year ago

in this case you don't need a later version

Cerlin · Accepted Answer · 2014-10-17 05:17:02Z

Check out this FIDDLE

In Codepen which you have provided, the html was not formatted properly.

var tableData = [
      ["Bloom Energy","$230,749,470.00","23.60%"],
      ["Sharp","$101,269,745.00","10.30%"],
      ["Fuel Cell Energy","$79,232,173.00","8.10%"],
      ["PowerLight Corp","$72,808,834.00","7.40%"],
      ["BP Solar","$42,675,004.00","4.40%"],
      ["Sanyo Corp","$42,490,525.00","4.30%"],
      ["GE Energy","$40,276,444.00","4.10%"],
      ["Kyocera","$35,602,522.00","3.60%"],
      ["Schott Solar","$30,763,890.00","3.10%"],
      ["Shell Solar","$26,424,040.00","2.70%"],
      ["Uni-Solar","$26,608,651.00","2.70%"],
      ["UTC Power","$24,692,800.00","2.50%"],
      ["Dresser Waukesha","$21,687,291.00","2.20%"],
      ["Solar Intergrated Technologies","$19,212,787.00","2.00%"],
      ["Hess Microgen","$17,541,618.00","1.80%"],
      ["ASE Americas, Inc","$13,900,954.00","1.40%"],
      ["SunPower Corp","$13,978,725.00","1.40%"],
      ["Capstone Turbine Corp","$12,987,082.00","1.30%"],
      ["SolarWorld","$12,220,067.00","1.20%"],
      ["Caterpillar","$8,342,765.00","0.90%"],
      ["Cummins Power","$8,356,097.00","0.90%"],
      ["Ingersoll-Rand","$8,083,191.00","0.80%"],
      ["Evergreen Solar","$7,170,698.00","0.70%"],
      ["Coast IntelliGen Power","$6,085,302.00","0.60%"],
      ["Ballard Power Systems","$4,747,500.00","0.50%"],
      ["First Solar","$4,927,430.00","0.50%"],
      ["Mitsubishi Power Systems","$5,250,000.00","0.50%"],
      ["Siemens","$4,519,114.00","0.50%"],
      ["Solar Turbines (Caterpillar)","$4,452,129.00","0.50%"],
      ["Energy Photovoltaics, Inc","$3,764,517.00","0.40%"],
      ["Mitsubishi Electric","$3,793,815.00","0.40%"],
      ["Deutz","$2,852,423.00","0.30%"],
      ["Guascor","$2,698,292.00","0.30%"],
      ["Matrix Solar","$3,373,977.00","0.30%"],
      ["NEG Micon","$3,118,147.00","0.30%"],
      ["SunTech Power","$3,358,984.00","0.30%"],
      ["Tecogen","$3,165,706.00","0.30%"],
      ["Tesla","$2,672,044.00","0.30%"],
      ["AstroPower","$1,587,822.00","0.20%"],
      ["BYD","$2,000,000.00","0.20%"],
      ["DTE Energy Technologies","$1,870,497.00","0.20%"],
      ["Flex Energy","$1,875,000.00","0.20%"],
      ["Fuhrlaender AG","$1,500,000.00","0.20%"],
      ["Kawasaki","$1,810,156.00","0.20%"],
      ["BluePoint Energy","$1,247,707.00","0.10%"],
      ["Canyon Hydro","$625,000.00","0.10%"],
      ["ClearEdge Power","$1,296,250.00","0.10%"],
      ["iPower Energy Systems","$1,036,000.00","0.10%"],
      ["Kaneka Corporation","$1,005,569.00","0.10%"],
      ["MAN","$864,000.00","0.10%"],
      ["Nexgen Energy Systems, Inc","$506,971.00","0.10%"],
      ["Open Energy Corp","$731,840.00","0.10%"],
      ["Prudent Energy","$1,200,000.00","0.10%"],
      ["Stowell Distributed Power","$1,341,000.00","0.10%"],
      ["Bowman Power","$328,420.00","0.00%"],
      ["Burgey","$10,686.00","0.00%"],
      ["Endurance Wind Power","$88,500.00","0.00%"],
      ["Entegrity Wind Systems","$258,000.00","0.00%"],
      ["Generac","$149,659.00","0.00%"],
      ["Genergy Power Solutions","$192,068.00","0.00%"],
      ["GS","$10,000.00","0.00%"],
      ["Hercules","$129,068.00","0.00%"],
      ["Indigo Wind Energy Systems Inc","$337,500.00","0.00%"],
      ["Martin Machinery","$171,413.00","0.00%"],
      ["Outback Power","$9,270.00","0.00%"],
      ["ReDriven Power Inc","$173,376.00","0.00%"],
      ["Simson Maxwell","$266,216.00","0.00%"],
      ["SMA America","$135,509.00","0.00%"],
      ["Southwest Windpower","$66,300.00","0.00%"],
      ["Stem Inc","$192,240.00","0.00%"],
      ["Sunverge","$86,400.00","0.00%"],
      ["Turbec AB","$315,870.00","0.00%"]
    ];

    $(document).ready(function() {

        $('#graphic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

        console.log(tableData);

        $('#example').DataTable( { 
            "data": tableData,
            "columns": [
                {"title": "column1"},
                {"title": "column2"},
                {"title": "column3"}
                ]
        });

    });

HTML

<body>
    <h1>TITLE OF GRAPHIC</h1>
    <h2>SUBHEAD</h2>
    <p>FIRST GRAF</p>
    <div id="graphic"></div>
    <div class="footer">
        <p>Source: DATA SOURCE</p>
    </div>
</body>

I can't see where my error was. And are you using the old version of tabletop here?

Collectives™ on Stack Overflow

Initializing a Jquery DataTable with a local array of arrays as datasource

2 Answers 2

Edit

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related