My addrow button in DataTables is not working-CodePudding

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"  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  style="width:50px">
                            1
                        </td>
                        <td>
                            <textarea  style="width:300px;" id="product_type"></textarea>
                        </td>
                        <td>
                            <textarea  style="width:300px;" id="condition"></textarea>
                        </td>
                        <td>
                            <input type="number" id="cashback">
                        </td>
                        <td>
                            <textarea  style="width:300px;" id="note"></textarea>
                        </td>
                        <td>
                            <div  id=""><i ></i></div>   
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <button style="width: 86px;" id="addRow" >Addrow<i  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>

CodePudding user response：

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"  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  style="width:50px">
        1
      </td>
      <td>
        <textarea  style="width:300px;" id="product_type"></textarea>
      </td>
      <td>
        <textarea  style="width:300px;" id="condition"></textarea>
      </td>
      <td>
        <input type="number" id="cashback">
      </td>
      <td>
        <textarea  style="width:300px;" id="note"></textarea>
      </td>
      <td>
        <div  id=""><i ></i></div>
      </td>
    </tr>
  </tfoot>
</table>

<button style="width: 86px;" id="addRow" >Addrow<i  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.