javascript - 将 DOM 元素附加到 Datatables 包装器

Question

我想向 Datatables 添加行tbody 使用 jQuery append() 方法。

这是完整的 JavaScript 代码:

$('#meterGroup').DataTable();
$("#meterListGroup").html("<table id='meterGroup' class='table table-striped table-bordered' cellspacing='0' width='100%'><tbody></tbody></table>");
$("#meterGroup").append("<thead><tr><th>Meter ID</th><th>Energy Consumption (kW)</th><th>Usage Ratio (%)</th></tr></thead>");

var meterId = 1;
var meterConsumption = 155;
var meterRatio = 20;

for (var i = 1; i <= 40; i++) {
  $("#meterListGroup > table > tbody").append("<tr><td>" + meterId + "</td><td>" + meterConsumption + "</td><td>" + meterRatio + "</td></tr>");
  meterId++;
  meterConsumption++;
  meterRatio++;
}

和简单的HTML:

<div id="meterListGroup"></div>

但是，Datatables 的结果不是我所期望的。缺少一些元素插件(例如搜索框、分页控件等。)

错在哪里？是否有 JSFiddle 可以提供帮助？

$('#meterGroup').DataTable();
$("#meterListGroup").html("<table id='meterGroup' class='table table-striped table-bordered' cellspacing='0' width='100%'><tbody></tbody></table>");
$("#meterGroup").append("<thead><tr><th>Meter ID</th><th>Energy Consumption (kW)</th><th>Usage Ratio (%)</th></tr></thead>");

var meterId = 1;
var meterConsumption = 155;
var meterRatio = 20;

for (var i = 1; i <= 40; i++) {
  $("#meterListGroup > table > tbody").append("<tr><td>" + meterId + "</td><td>" + meterConsumption + "</td><td>" + meterRatio + "</td></tr>");
  meterId++;
  meterConsumption++;
  meterRatio++;
}

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h3><i class="fa fa-tachometer" aria-hidden="true"></i> Meter List Information</h3>
<!-- Meter List Information -->
<div id="meterListGroup"></div>

Answer 1

在使用html() 和append() 构造表格后，您需要对其进行初始化。

$("#meterListGroup").html("<table id='meterGroup' class='table table-striped table-bordered' cellspacing='0' width='100%'><tbody></tbody></table>");

// ... skipped ...

$('#meterGroup').DataTable();

参见 updated example用于代码和演示。