如何制作DataTable，但该行仅附加

Question

我有一个手动添加行的表，但我想将它变成一个 DataTable 以使其对用户友好。 但我不知道该怎么做。

我试着在网上搜索它，我看到了这个，它很相似，但它不起作用或者我做错了什么...... 见这里

这也是我的代码：

 const tbody = document.getElementById("choicesListTbodyADD"); const btnAdd = document.querySelector("button"); const inputChoices = document.querySelector("input"); var count = 1; btnAdd.addEventListener("click", function () { $(tbody).append(`<tr><td>${count}</td><td>${inputChoices.value.trim()}</td><td>DELETE</td></tr>`) inputChoices.value = ''; })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <br><br> <input type="text" id="choices"/> <button id="appendChoices">Add Choices</button> <br><br> <table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence"> <tr> <th>No.</th> <th>Choices</th> <th>Action</th> </tr> <tbody id="choicesListTbodyADD"></tbody> </table>

Answer 1

这是一种基于您的非 DataTables 代码的方法。

我已经包含了我认为您需要的 Bootstrap 库 - 但您可以根据需要调整它们。

 $(document).ready(function() { var table = $('#ADDchoicesARTableListSequence').DataTable(); const tbody = document.getElementById("choicesListTbodyADD"); const btnAdd = document.querySelector("button"); const inputChoices = document.querySelector("input"); var count = 1; btnAdd.addEventListener("click", function() { table.row.add($(`<tr><td>${count}</td><td>${inputChoices.value.trim()}</td><td>DELETE</td></tr>`)).draw(); count += 1; inputChoices.value = ''; }) });

 <:doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap:css" /> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.13.1/css/dataTables.bootstrap5:css" /> <script type="text/javascript" src="https.//code.jquery.com/jquery-3.6.0:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle:js"></script> <script type="text/javascript" src="https.//cdn.datatables.net/1.13.1/js/jquery.dataTables:js"></script> <script type="text/javascript" src="https.//cdn.datatables.net/1.13.1/js/dataTables.bootstrap5:js"></script> </head> <body> <div style="margin; 20px."> <input type="text" id="choices" /> <button id="appendChoices">Add Choices</button> <br><br> <table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence"> <thead> <tr> <th>No.</th> <th>Choices</th> <th>Action</th> </tr> </thead> </table> </div> </body> </html>

主要注意事项：

在这种情况下，您的 HTML 表不需要<body> ，因为 DataTables 会为您提供。
不要忘记在添加每一行后使用draw() - 重新绘制表格，以便显示新数据。
在这种情况下，我使用$(<tr>...</tr>)从您的数据创建一个新的 DOM 节点。 但是您可以从文档中看到还有其他方法可以创建新行：

使用数组
使用 object
使用节点（这就是我们在这里所做的）

我选择使用节点是因为它最接近您的代码已经完成的工作。

如何制作DataTable，但该行仅附加

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-01-21 15:24:21

如何制作DataTable，但该行仅附加

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-01-21 15:24:21

解决方案1
1 已采纳 2023-01-21 15:24:21