如何编辑数据表中的一行

Question

我正在尝试编辑数据表中的一行，点击它。

我正在关注文档：https://datatables.net/reference/api/row().edit()，但它对我不起作用。

我收到这个错误：

"Uncaught TypeError: this_row.edit is not a function"

我的代码：

(function(){

  product_table = $('#product_table').DataTable({
    fixedHeader: {
      header: true,
      footer: true
    },
    bLengthChange: false
  });

  row=[
    '<div style="white-space: nowrap;">'+
    '<button type="button" class="btn edit btn-sm btn-light m-1">Edit</button>'+
    '</div>',
    'test',
    1,
    'tes',
    2.12,
    2.12
  ]
  product_table.row.add(row).draw( false )

  $('#product_table tbody').on('click', 'button', function () {
    row[2] += 1;
    let this_row = product_table.row($(this).parents('tr'));
    this_row.edit(row); // <- that point!!!
  });
  
})();

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<!-- datatable-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>

<table id="product_table" class="table table-fit">
    <thead>
        <tr>
            <th></th>
            <th>name</th>
            <th>amount</th>
            <th>unit</th>
            <th>price unit</th>
            <th>total price</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

*这段代码只是我想要的一个例子，我并不打算增加一个数字。在我的真实代码中，我创建了一个模式，将这些字段作为输入并重新创建 'row' 变量，但编辑功能基本相同

Answer 1

我终于找到了解决办法。

您可以用这种方式轻松编辑行数据，无需 API:

this_row.data(row).draw();

文档：

https://datatables.net/reference/api/row().data()

如何编辑数据表中的一行

How to edit a row in datatables

javascript

jquery

datatables