Динамически вставить строку в DataTables

Question

Я пытаюсь вставить строку в таблицу данных по нажатию кнопки.

Вот мой 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>

Вот как я определяю данные:

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>";


  }
}

]});

А вот мой jqueryкод:

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

Когда я нажимаю на кнопку, я получаю следующее сообщение об ошибке:

Предупреждение DataTables: идентификатор таблицы = заказы - Запрошен неизвестный параметр 'product.description'для строки 0, столбца 0. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4

Может кто-нибудь сказать мне, что я делаю не так, пожалуйста, здесь.

Answer 1

Что вы подразумеваете под этим?Как пары ключей-значений?

Да, просто литерал объекта с точно такой же компоновкой, что и у dataSrc, или, по крайней мере, такими же, как те свойства, которые вы определяете в columns:

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

---

Флажок отображается неправильно, поскольку вы определяете состояние флажков с помощью атрибута checked, а не value.Т.е.

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

вместо

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

Вы можете использовать value для сохранения значения (!), Но это не меняет состояние checked.