Dynamically insert row in DataTables

Question

I am trying to insert a row in the DataTable on button click.

Here's my html:

<table id="orders" class="table table-bordered table-hover">
 <thead bgcolor="#ADD8E6">
                    <tr>
                        <th>Product Name</th>
                        <th>Quantity</th>
                        <th>Normal Price</th>
                        <th>Discount %</th>
                        <th>Line Taxes</th>
                        <th>Final Price</th>
                        <th>Line Item Total</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

Here's how I am defining the datatable:

table = $("#orders").DataTable({
  ajax: {
url: "/api/lineitems?id=" + id,

dataSrc: ""
 },
  columns: [{
  className: "description",
  data: "product.description",
},
{

  data: "quantity",
  render: function(data, type, product) {
    var s = $('<select id="qty_dropdown" />');
    for (i = 1; i <= data; i++) {
      $('<option />', {
        value: i,
        text: i
      }).appendTo(s);
    }
    return s.prop("outerHTML");


  }
},
{

  data: "product.productPrice"
},
{
  data: "discount",
  render: function(data, type, product) {
    return "<div class='form-group'>" +

      "<input type='text' class='form-control'  value=\"" + data + "\"></input>" +
      "</div>";

  }
},
{
  data: "product.isTaxable",
  render: function(data, type, product) {
    if (data == true)
      return "<label><input type='checkbox' value='true'></label>";
    else
      return "<label><input type='checkbox' value='true'></label>";
  }
},
{
  data: "finalPrice"
},
{
  data: "lineItemTotal"

},
{
  data: "product.description",
  render: function(data, type, product) {

    return "<span class='glyphicon glyphicon-trash js-delete' data-lineitem-id=" + data + "></span>";


  }
}

] });

And here's my jquery code:

$(document).on('click', '#addRow', function () {
       table.row.add([
            "dfdsgsgdfgd",
            "15",
            "1234",
            "10",
            "12",
            true,
            "12345",
            $("#product").val()
        ]).draw();
});

When I click on the button, I get the following error message:

DataTables warning: table id=orders - Requested unknown parameter 'product.description' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Can anyone tell me what I doing wrong here please.

You must insert data the same way as they are defined in columns. — davidkonrad

davidkonrad davidkonrad · Accepted Answer · 2018-09-19T16:12:38

What do you mean by that? Like key value pairs?

Yes, simply an object literal with the exact same layout as your dataSrc, or at least the same as those properties you define in columns:

table.row.add({
  quantity: 'foo',
  discount: 'foo',
  finalPrice: 'foo',
  lineItemTotal: 'foo',
  product: {
    description: 'foo',
    productPrice: 'foo',
    isTaxable: 'foo'
  }
}).draw()

The checkbox is not rendered properly because you define a checkboxs state by the checked attribute, not value. I.e

return "<label><input type='checkbox' checked></label>";

instead of

return "<label><input type='checkbox' value='true'></label>";

You can use value to store a value (!) but it does not change the checked state.

Dynamically insert row in DataTables

1 Answers