Question

我正在尝试使用DataTables jquery插件构建一个DataTable，我的数据源自一个存储在变量中的数组数组。我已将代码缩减为"data-sources" example in the documentation中放置的示例的近图。

基本上我无法让它发挥作用。这是它的要点：

$(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支持source as array of array，你只是初步宣传不正确的属性，您需要aaData和aoColums，此处正常工作pen

$('#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>

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

2 个答案:

修改