使用jQuery将动态数据加载到“DataTables”的问题

时间:2014-11-12 20:20:19

标签: javascript jquery datatables

Demo

我正在使用this solution将动态数据加载到Data Table。我必须使用Array of Array,因为我从字体结束选择(NO DATABASE Selection)获取用户的动态数据。 我使用以下代码将数据上传到表

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"></table>

和JS:

$(document).ready(function () {
    var counter = 0;
    var compareTable = [];
    var compareRow = [];
    var check = "Test";
    var compModelName = "Test";
    var selectedType = "Test";
    var selectedTarget = "Test";
    var selectedROR = "Test";
    var selectedSpecies = "Test";
    var historicDis = "Test";
    var projectsNumber = "Test";
    var projectsCost = "Test";
    var projectsRoads = "Test";
    var projectsPowerline = "Test";
    var projectsPenstock = "Test";
    var mapshow = "Test";

    $("#load").on("click", function () {
        loader();
    });

    function loader() {
        compareRow.push(check);
        compareRow.push(compModelName);
        compareRow.push(selectedType);
        compareRow.push(selectedTarget);
        compareRow.push(selectedROR);
        compareRow.push(selectedSpecies);
        compareRow.push(historicDis);
        compareRow.push(projectsNumber);
        compareRow.push(projectsCost);
        compareRow.push(projectsRoads);
        compareRow.push(projectsPowerline);
        compareRow.push(projectsPenstock);
        compareRow.push(mapshow);
    }

    $('#example').dataTable( {
        "data": compareTable,
        "columns": [
            { "title": "Compare" },
             { "title": "Model Name" },
            { "title": "Model Type" },
            { "title": "Energy Target" },
            { "title": "ROR Attribute" },
            { "title": "Species", "class": "center" },
            { "title": "Disturbance", "class": "center" },
            { "title": "Projects" },
            { "title": "Cost (M$)" },
            { "title": "Roads (Km)" },
            { "title": "Powerlines (Km)", "class": "center" },
            { "title": "Penstock (m)", "class": "center" },
            { "title": "Map" }
         ]
    } );   
    });
});

但正如您在演示中看到的那样,当我们点击"#load"时,它无法正常运行。能告诉我为什么会发生这种情况以及如何解决这个问题吗?

0 个答案:

没有答案