使用 jQuery 和 dataTables 以编程方式创建表答案

【问题标题】：Programmatically create tables with jQuery and dataTables使用 jQuery 和 dataTables 以编程方式创建表
【发布时间】：2019-11-24 10:46:33
【问题描述】：

我正在使用 dataTables 在 Django Web 应用程序上以编程方式呈现表格：

jQuery

$(document).ready(function() {
    $("#dynamic0").html('<table cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered" id="peak_table_0"></table>');
    $('#peak_table_0').dataTable( {
        "aaData": {{ table_data|safe }},
        "aoColumns": {{ table_headings|safe }}
    });
});

HTML

<div id="dynamic0"></div>

我将有许多类似的表，其中只有数据会改变，所以我想自动创建表。我试图将 jQuery 初始化程序放在一个循环中，但在这种情况下，表格不会呈现： jQuery

$("div1").each(function(index) {
    var table_id = "peak_table_" + index
    $(this).html('<table cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered" id="'+table_id+'"></table>');

    $(table_id).dataTable( {
        "aaData": {{ table_data|safe }},
        "aoColumns": {{ table_headings|safe }}
    });
});

HTML

<div1 id="dynamic0"></div1>
<div1 id="dynamic1"></div1>

我猜选择器没有正确识别。有什么建议吗？

【问题讨论】：

标签： javascript jquery html jquery-selectors datatables

【解决方案1】：

改变

div1

到

div

我在 DOM 阻塞中预感到 jQuery，因为它不是有效的 HTML 标记。

【讨论】：

但是在那种情况下它会遍历所有的 div 标签，对吧？

【解决方案2】：

以下作品。它缺少 table_id 中的“#”。

$("div1").each(function(index){
      var table_id = "peak_table_"+index;
      $(this).html('<table cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered" id="'+table_id+'"></table>');
      $("#"+table_id).dataTable( {
          "aaData": {{ table_data|safe }},
          "aoColumns": {{ table_headings|safe }}
      });
});

【讨论】：