CODEWITHSUNDEEP
javascriptjquerydatatables
Felipe Cristiano
Felipe Cristiano

Reputation: 301

How to edit a row in datatables

I'm trying to edit a row in datatables, clicking on that.

I'm following the documentation: https://datatables.net/reference/api/row().edit(), but it's not working for me.

I got this error:

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

my code:

(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/[email protected]/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>

*this code is just an example of what I want, I'm not exactly going to increment a number. In my real code I create a modal with these fields as input and recreate the 'row' variable, but the edit function is basically the same

Upvotes: 1

Views: 4534

Answers (1)

Felipe Cristiano
Felipe Cristiano

Reputation: 301

I finally found a solution.

You can easily edit the row data in this way, without the need for an API:

this_row.data(row).draw();

Documentation:

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

Upvotes: 3

Related Questions