javascript - 一页上有多个表格的数据表

Question

我想问一下如何使用 DataTables 插件在一页上通过 JavaScript 代码生成更多表格。三个表中只有两个以错误的顺序呈现。

jsfiddle

var keywords1 = JSON.parse("{\"1\": [\"lor\"],\"2\": [\"ember\"],\"3\": [\"pleasant\"]}");
var keywords2 = JSON.parse("{\"1\": [\"bachelor\"],\"2\": [\"mber\"],\"3\": [\"pleasant\"]}");
var keywords3 = JSON.parse("{\"1\": [\"b\"],\"2\": [\"rem\"],\"3\": [\"pl\"]}");

    buildKeywordTableString(keywords1);
    buildKeywordTableString(keywords2);
    buildKeywordTableString(keywords3);


    function buildKeywordTableString(keywords){

    var keywordTableString = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>';

    var keys = Object.keys(keywords);
    var dataSet = new Array();

    for (var i = 0; i < keys.length; i++){
        for (var j = 0; j < keywords[keys[i]].length; j ++){
            var row = new Array();
            row.push(keywords[keys[i]][j]);
            row.push(keys[i]);
            dataSet.push(row);
        }
    }

    $('#example').dataTable( {
    "data": dataSet,
    "columns": [
        { "title": "Key" },
        { "title": "R" }
    ]
} );   

    document.body.innerHTML = keywordTableString + document.body.innerHTML;
}

感谢您的帮助。

Answer 1

每次 buildKeywordTableString() 运行时，它都会使用 id="example" 创建另一个表，这是错误的，因为 ids 应该是唯一的。不确定$('#example')会找到哪个节点。

您实际上可以创建并添加一个新表，然后将数据表应用于它，而不需要 ID。

function buildKeywordTableString(keywords) {
    var keys = Object.keys(keywords);
    var dataSet = [];
    for (var i = 0; i < keys.length; i++) {
        for (var j = 0; j < keywords[keys[i]].length; j ++) {
            dataSet.push([
                keywords[keys[i]][j],
                keys[i]
            ]);
        }
    }
    $('<table cellpadding="0" cellspacing="0" border="0" class="display"></table>')
        .prependTo("body")
        .dataTable({
            "data": dataSet,
            "columns": [
                {"title": "Key"},
                {"title": "R"}
            ]
        });
}

这至少应该给你一个战斗的机会。