在一个页面上有更多表的数据表

Question

我想问一下如何在一页上使用JavaScript代码生成的更多表的DataTables插件。从三张表格中只显示两张，顺序错误。

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"，这是错误的，因为ID应该是唯一的。不确定哪个节点$('#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"} 
      ] 
     }); 
} 

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