my addrow button in Datatables is not working

Question

I'm a frontend learner I just found this very useful datatables plugin Here the link if you don't know bout this plugin plugin

But I have one problem I try to create a button that can help me to add row into the table and still remain every element in each column I don't know why my code didn't work I appreciate every help

 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

you need to initialise the DataTable before you can add the data to it - once that's done, you need to tell it about the shape of your data. You're also running into an issue that the data you've got in arrData is overwriting your input fields - so I moved the inputs into the table footer; that seems to make the most sense, 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>

Hopefully, that will get you on the right track. The thing to take the most notice of is your initialisation of the DataTable; once that's there, you should be fine.