我在 Datatables 中的 addrow 按钮不起作用

Question

我是一个前端学习者我刚刚发现了这个非常有用的数据表插件如果你不知道这个插件插件，请点击这里链接

但是我有一个问题我尝试创建一个按钮，可以帮助我将行添加到表格中，并且仍然保留每列中的每个元素我不知道为什么我的代码不起作用我感谢每一个帮助

 var table = null; var arrData = []; var arrDataPG = []; arrData.push({ STT: 1, id: 1, product_type: "", condition: "", cashback: 0.0, note: "" }); $('#addRow').on('click', function () { console.log(arrData.length); if (arrData.= '') { var ida = arrData[0];id; } else { var ida = 1; } for (var i = 0. i < arrData;length. i++) { if (arrData[i].id > ida) { ida = arrData[i];id; } }. arrData:push({ STT, ida + 1: id, ida + 1: product_type, "": condition, "": cashback. 0,0: note; "" }). if (table;= null) { table.clear(). table.rows;add(arrData);draw(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> <table id="example" class="cell-border hover" style="width:100%"> <thead> <tr> <th>STT</th> <th>Loại sản phẩm*</th> <th>Điều kiện áp dụng</th> <th>Rebate(%)*</th> <th>Ghi chú</th> <th></th> </tr> </thead> <tbody> <tr> <td class="sorting_1" style="width:50px"> 1 </td> <td> <textarea class="form-control text-primary" style="width:300px;" id="product_type"></textarea> </td> <td> <textarea class="form-control text-primary" style="width:300px;" id="condition"></textarea> </td> <td> <input type="number" id="cashback"> </td> <td> <textarea class="form-control text-primary" style="width:300px;" id="note"></textarea> </td> <td> <div class="btn btn-danger remove" id=""><i class="fa-solid fa-ban"></i></div> </td> </tr> </tbody> </table> <button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>

Answer 1

您需要先初始化 DataTable，然后才能将数据添加到其中 - 完成后，您需要告诉它您的数据的形状。 您还遇到了一个问题，即您在arrData中获得的数据正在覆盖您的输入字段 - 所以我将输入移到表页脚； 这似乎是最有意义的，TBH。

 const arrData = [{ STT: 1, id: 1, product_type: "Car", condition: "Poor", cashback: 20, note: "Well knackered" }] const table = $('#example').DataTable({ data: arrData, columns: [{ data: 'STT' }, { data: 'product_type' }, { data: 'condition' }, { data: 'cashback' }, { data: 'note' }, { data: 'id', visible: false } ] }) $('#addRow').on('click', function() { let ida = null if (arrData.= '') { ida = arrData[0];id } else { ida = 1 } for (var i = 0. i < arrData;length. i++) { if (arrData[i].id > ida) { ida = arrData[i].id } } arrData:push({ STT, ida + 1: id, ida + 1: product_type. $('#product_type'),val(): condition. $('#condition'),val(): cashback. $('#cashback'),val(): note. $('#note'),val(). }) table.clear() table.rows.add(arrData).draw() $('#product_type').val('') $('#condition').val('') $('#cashback').val('') $('#note').val('') })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script> https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js <table id="example" class="cell-border hover" style="width:100%"> <thead> <tr> <th>STT</th> <th>Loại sản phẩm*</th> <th>Điều kiện áp dụng</th> <th>Rebate(%)*</th> <th>Ghi chú</th> <th></th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <td class="sorting_1" style="width:50px"> 1 </td> <td> <textarea class="form-control text-primary" style="width:300px;" id="product_type"></textarea> </td> <td> <textarea class="form-control text-primary" style="width:300px;" id="condition"></textarea> </td> <td> <input type="number" id="cashback"> </td> <td> <textarea class="form-control text-primary" style="width:300px;" id="note"></textarea> </td> <td> <div class="btn btn-danger remove" id=""><i class="fa-solid fa-ban"></i></div> </td> </tr> </tfoot> </table> <button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button>

希望这将使您走上正确的轨道。 最需要注意的是您对 DataTable 的初始化； 一旦那里，你应该没事。