Struggling to create a compatible algorithm for this code. How do I send data to the backend while using bootstable.js for tables?
The HTML table structure is as follows:
<table class="table table-bordered" id="table-list">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Slug</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{% for chart in charts %}
<tr>
<th id="id">{{chart.id}}</th>
<td class="editable" id="name">{{chart.name}}</td>
<td class="editable" id="slug">{{chart.slug}}</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5afaaadab85a0bda4a8b5a9a0eba6aaa8">[email protected]</a></td>
</tr>
{% empty %}
<p>No data</p>
{% endfor %}
</tbody>
</table>
Below is the JavaScript code snippet that requires attention:
<script src="{% static 'npe_cp/js/bootstable.js' %}"></script>
<script>
//apply
$("#table-list").SetEditable();
$('#addRow').click(function() {
rowAddNew('table-list');
});
$('#bAcep').on('click', function(){
// var id=$("#id").val();
// var name=$("#name-44").val();
// var slug=$("#slug-44").val();
let name=document.querySelector('#name')
console.log(id, name, slug, 'Hello World')
$.ajax({
url:"/chart/edit",
type:"POST",
data:{
"id":id,
"name":name',
'"slug":slug,
},
})
});
Describing the appearance and functionality of the table's update, create, and delete operations which are not functioning as intended.