Question

我使用JQuery生成基于JSON内容的表，但是当我初始化DataTables时，它没有看到表内容。我没有看到或做错了什么？

HTML代码

<textarea id="source-code" rows="10" cols="100"></textarea><br/>
<button id="process-source">Parse JSON</button>
<div id="output-pairs"></div>

JQuery代码（更新后的工作）

var sourceCode;

this.$ = this.jQuery = jQuery.noConflict(true);

$("#process-source").click(function(){
    sourceCode = $("#source-code").val();
    $("#source-code").hide();
    $(this).hide();
    loadJSON();
    $('#nsp').DataTable( {
        "bSort": false,
        "ordering": false,
        "info": true,
        "paging": true,
        "aoColumns": [ 
          { sWidth: "20%", bSearchable: true, bSortable: false }, 
          { sWidth: "40%", bSearchable: true, bSortable: false },
          { sWidth: "40%", bSearchable: true, bSortable: false }
        ],
    });
});

function loadJSON() {
    var json = $.parseJSON(sourceCode);

    var html = "<table id='nsp' class='display' data-order='[[ 1, \"asc\" ]]' data-page-length='25'>";    
    html += "<thead><tr><th colspan='2' id='banner'><span id='productName'>PRODUCT</span> <span id='versionNo'>Version " + json.V + "</span></th></tr>";
    html += "<tr><th>Settings</th><th>Values</th><th>Comments</th></tr></thead><tbody>";

    $.each(json.prefs, function (key, value) {
        html += "<tr><td>" + key + "</td><td>" + value + "</td><td></td></tr>";
    });

    $.each(json, function (key, value) {
        if (key !== "prefs") {
            html += "<tr><td>" + key + "</td><td>" + value + "</td><td></td></tr>";
        }
    });

    html += "</tbody></table>";

    $("#output-pairs").append(html);   
};

结果

接下来是生成的表。简单地基于外观的顺序（BLANK DataTable然后是TABLE Generated）我认为它是一个订单问题，但实际上我并不认为这是正在发生的事情。我觉得它无论如何都无法访问由JQuery代码生成的DOM内容。

有没有人处理过这个或者能告诉我我做错了什么？

工作结果（谢谢@Gyrocode）

修改为colspan='3'的横幅确实很有效。

Answer 1

<强>原因

使用HTML源数据时，jQuery DataTables需要<tbody>标记，请参阅HTML markup。
jQuery DataTables不支持数据行的colspan和rowspan属性。
您正在使用append()未正确构建的HTML元素。在变量中构建标记，然后使用append()或html()。

<强>解

function loadJSON() {
    var json = $.parseJSON(sourceCode);

    var html = "<table id='nsp' class='display' data-order='[[ 1, \"asc\" ]]' data-page-length='25'>";    
    html += "<thead><tr><th colspan='2' id='banner'><span id='productName'>PRODUCT</span> <span id='versionNo'>Version " + json.V + "</span></th></tr>";
    html += "<tr><th>Settings</th><th>Values</th><th>Comments</th></tr></thead><tbody>";

    $.each(json.prefs, function (key, value) {
        html += "<tr><td>" + key + "</td><td>" + value + "</td><td></td></tr>";
    });

    $.each(json, function (key, value) {
        if (key !== "prefs") {
            html += "<tr><td>" + key + "</td><td>" + value + "</td><td></td></tr>";
        }
    });

    html += "</tbody></table>";

    $("#output-pairs").append(html);   
};

<强>样本

请参阅this jsFiddle进行演示。

Answer 2

调试或实现Databable应该做的第一件事是使用静态数据创建一个合适的表结构。这样你就会意识到问题要简单得多：DataTables不是问题，而是由jQuery创建的表结构。

您正在#output-pairs容器中使用追加'追加'html块。这样做，你的loadJSON函数中的第一个追加是附加一个整个元素，也就是说，它甚至在放入任何内容之前关闭你的表。其余的追加被添加到正文中，而不是添加到表格中。

解决方案是在变量中创建表，然后使用它在容器中插入html内容。

 function loadJSON(){
     var o = $("#output-pairs");   
     var html = "<table id='nsp' class='display' data-order='[[ 1, \"asc\" ]]' data-page-length='25'>";
     var json = $.parseJSON(sourceCode);

     html += "<thead>";
     html += "<tr><th colspan='2' id='banner'><span id='productName'>PRODUCT</span> <span id='versionNo'>Version " + json.V + "</span></th></tr>";
     html += "<tr><th>Settings</th><th>Values</th><th>Comments</th></tr>"          
     html += "</thead><tbody>";

     $.each( json.prefs, function( key, value ) {
        html += "<tr><td>" + key + "</td><td>" + value + "</td><td></td></tr>";
     });

     $.each( json, function( key, value ) {
        if (key !== "prefs"){
            html += "<tr><td>" + key + "</td><td>" + value + "</td><td></td></tr>";
        }
    });
    html += "</tbody></table>";

o.html(html);

};

另请注意，由于tr未关闭，您的头部未正确形成。我已经为你关闭了它们。

关于你的第二个$。每个我认为那里也有问题。难道你不认为创建一个数组与你配对键值而不是使用和'if'跳过你的prefs会更好吗？

我会使用如下结构：json.version，json.settings，json.values，......所以在你的第二个中你可以迭代json.values。

JQuery生成的表不可访问DataTable

HTML代码

JQuery代码（更新后的工作）

结果

工作结果（谢谢@Gyrocode）

2 个答案: