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, Commented Sep 19, 2018 at 15:05

davidkonrad · Accepted Answer · 2018-09-19 16:31:54Z

1

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.

edited Sep 19, 2018 at 16:31

answered Sep 19, 2018 at 16:12

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mcfred Over a year ago

Thank you. This worked except for the isTaxable value. If I set it to true, the checkbox is not checked. I tried setting it like this : isTaxable: true (without quotation) but it didnt render a checked box.

davidkonrad Over a year ago

See update, this is because you are handling the checkbox inputs a little bit wrong. You should use isTaxable: true if you evaluate with if (data == true) in the render.

mcfred Over a year ago

Thank you very much david. Learned alot today. Thanks for your time.

Collectives™ on Stack Overflow

Dynamically insert row in DataTables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related