John Davidson

$(document).ready(function() {

  fetch_orderdetails()



  function fetch_orderdetails() {

    $.ajax({

      url: "/api/v1/orders/1",

      dataType: "json",

      success: function(orderdetails) {

        var html = '';

        for (var count = 0; count < orderdetails.length; count++) {

          alert(orderdetails[count].coincode);

          html += '<tr style="text-align:center!important;">';

          html += '<td style="display:none;">' + orderdetails[count].id + '</td>';

          html += '<td>' + orderdetails[count].jeton + '</td>';

          html += '<td>' + orderdetails[count].triggerpricebuy + '</td>';

          html += '<td>' + orderdetails[count].triggerpricesell + '</td>';

          html += '<td>' + orderdetails[count].availableusd + '</td>';

          html += '<td>Action</td>';

          html += '<td>' + orderdetails[count].coincode + '</td>';

          html += '</tr>';

        }

        $('tbody#orderdetails').html(html);

      }

    });

  }

});

<div class="row">

  <div class="col-xl-9 col-lg-12">

    <div class="table-responsive text-white table-hover fs-14" style="">

      @csrf

      <table id="editable" class="table table-striped  display mb-4 dataTablesCard short-one  card-table text-black" style="font-size:1.1rem; text-align:center!important; color:white!important;">

        <thead style="font-size:1.5rem!important;">

          <tr>

            <th style="display:none!important;">id</th>

            <th style="padding-left: 0px!important; padding-right:0px!important;">Jeton</th>

            <th>BuyPrice</th>

            <th>SellPrice</th>

            <th>$ Value</th>

            <th>Actions</th>

            <th>OrderType</th>

          </tr>

        </thead>

        <tbody id="orderdetails">

          // For non-Ajax version only difference I have a foreach loop here with the same source with same classes and other details.

        </tbody>

      </table>

    </div>

  </div>

---

My Answer:
= orderdetails.length; count++) {_ html += ''_ html += '' + orderdetails[count].id + ''_ html += '' + orderdetails[count].product_name + ''_ html += '' + orderdetails[count].quantity + ''_ html += ''_ }_ $('#orderdetails_table').html(html);_ }_ });_ }_});____In this code snippet, you are fetching order details using AJAX and populating a table with the data. However, the issue you are facing is that the functionalities of TableEdit jQuery plugin are not working on the dynamically fetched table. This is because the plugin needs to be initialized after the table is populated with data.

To solve this issue, you can initialize the TableEdit plugin after the AJAX call is successful. Here's an updated version of your code:

javascript
$(document).ready(function() {
fetch_orderdetails();

function fetch_orderdetails() {
$.ajax({
url: "/api/v1/orders/1",
dataType: "json",
success: function(orderdetails) {
var html = '';
for (var count = 0; count < orderdetails.length; count++) {
html += ''
html += '' + orderdetails[count].id + ''
html += '' + orderdetails[count].product_name + ''
html += '' + orderdetails[count].quantity + ''
html += ''
}
$('#orderdetails_table').html(html);

// Initialize TableEdit plugin after populating the table
$('#orderdetails_table').Tabledit({
// Specify options for the plugin here
});
}
});
}
});


By initializing the TableEdit plugin after populating the table with data, the functionalities of the plugin should work as expected. Make sure to replace `#orderdetails_table` with the actual ID of your table element.

If you are looking for alternative live editable datatable libraries, you can consider libraries like DataTables (https://datatables.net/) or Handsontable (https://handsontable.com/). These libraries provide similar functionalities for live editing of data tables.