在 DataTables 中动态插入行

Question

我试图在单击按钮时在 DataTable 中插入一行。

这是我的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 警告：表 id=orders - 请求的未知参数 第 0 行第 0 列的“product.description”。有关更多信息 这个错误，请看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 状态。