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 =订单-请求的未知参数第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状态。

在DataTables中动态插入行

1 个答案: