DataTables在一个页面上包含更多表

时间:2014-10-27 17:47:59

标签: javascript jquery datatables

我想问一下如何在一个页面上使用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;
}

感谢您的帮助。

1 个答案:

答案 0 :(得分: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"}
            ]
        });
}

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