使用本地数组作为数据源初始化Jquery DataTable

Question

我正在尝试使用DataTables jquery插件构建DataTable，并将我的数据源于存储在变量中的数组数组中。 我已将代码缩减为与文档的“数据源”示例中列出的示例大致相似的图像。

基本上我就是无法正常工作。 这是要点：

$(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"}
        ]
    });

});

我的数据如下所示：

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

完整的CodePen就在这里： http ://codepen.io/scottpham/pen/mkhvr

显然，示例中引用的DataTables版本在版本控制方面有些过时，但是我希望它仍然有效，因为我不知道其他地方。

Answer 1

您正在使用1.9.4但需要1.10.***版本，这就是为什么不起作用的原因

编辑

我很抱歉， 1.9.4支持源作为数组的数组 ，你只是initialaze不正确的属性，你需要aaData和aoColums ，在这里工作的笔

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

Answer 2

看看这个FIDDLE

在您提供的Codepen中，html的格式不正确。

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>