My addrow button in DataTables is not working

Question

I am trying to create a button that can help me to add a row into a DataTables table and still remain every element in each column.

I don't know why my code didn't work.

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.