Develop Reference

Sending data to database with JavaScript in Django

I need to write a compatible algorithm for this code, but I can't. How can I send data to backend?
I am using bootstable.js for table
HTML table:
<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>john#example.com</td>
</tr>
{% empty %}
<p>No data</p>
{% endfor %}
</tbody>
</table>
And this is my JavaScript code. I tried to try some methods myself but it didn't work
<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,
},
})
});
This is exactly what the table looks like. I want to update, create, and delete operations. But I am not getting the data.

Use Django Forms to populate the database, makes it easy to perform CRUD operations

Displaying JSON data on condition using V-for and V-if in Vue.js

I am fetching data(Orders) from external Api in Vue using axios. I obtain JSON data and i am able to show it in a HTML table. Now i am trying filter the data to show only related data to use. In my Json data, i have a field called "order status: Completed / processing". Now i only want to show the json data which are have status like "Processing" to achieve my goal.
I am trying to use v-if with v-for but I m unable to get the certain orders data and view.
The table is set to update for each minute.
Here is my code:
html code
**<div class ="container mt-4" id="app">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Order id</th>
<th scope="col">Name</th>
<th scope="col">Order Date</th>
<th scope="col">Phone</th>
<th scope="col">Address</th>
<th scope="col">Items</th>
<th scope="col">Total</th>
<th scope="col">Print</th>
</tr>
</thead>
<tbody>
<tr
v-for="(order, index) in orders" v-if="order.status === "processing""
:key="order.id"
:class="{highlight: !order.is_printed}"
>
<td>{{ order.id }}</td>
<td>{{ order.billing.first_name + " " +order.billing.last_name }}</td>
<td>{{ order.date_created }}</td>
<td>{{ order.billing.phone}}</td>
<td>{{ order.billing.address_1 + ", " + order.billing.address_2 + ", " + order.billing.city + order.billing.postcode }}</td>
<td>{{ order.line_items[0].name}} </td>
<td>{{ order.total}}</td>
<td><button class="btn btn-primary" #click="printBill(order)">Print</button>
</tr>
</tbody>
</table>**
Vue
<script>
var app = new Vue({
el: '#app',
data: {
orders: []
},
mounted: function() {
// API Call function to be implemented here....
</script>

I think this should do the trick.
According to Vue documentation it's best to put any logic into computed properties https://v2.vuejs.org/v2/guide/computed.html
new Vue({
el: "#app",
data: {
orders: [
{ id: 1, status: "processing"},
{ id: 2, status: "other" }
]
},
computed: {
filteredOrders() {
return this.orders.filter(order => order.status === 'processing');
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr v-for="order in filteredOrders" :key="order.id">
<td>{{ order.status }}</td>
</tr>
</tbody>
</table>
</div>

its better to filter data after you get them from api.
based on vue.js document it’s not recommended to use v-if and v-for together, read this:
https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if
try this
let filteredData = this.orders.filter(order => order.status === "processing")

pagination for table rows with fixed tablehead

On my website I created a "dynamic" table. I want to include a pagination, to only show 10 rows at a time. The table head shall be displayed above the rows on every page.
But with my pagination function, all the content within is put under "Ref.". If I uncomment the commented part, the pagination does not work at all.
What needs to changed in my code to display the table correct on each page? (all ref{{i}} under "Ref." / "score{{i}} under "Score" /...)
Table:
{% if empty == False %}
<table style="float: left; width: 100%" class="table table-hover">
<thead id="header">
<tr >
<th>Ref.</th>
<th>Score</th>
<th>Title</th>
</tr>
</thead>
<tbody>
{% for i in range (0,numofresults) %}
<tr id="cardmb3n{{i}}">
<td id="ref{{i}}"> </td>
<td id="score{{i}}" "> </td>
<td>
<div>
<a id="header{{i}}" href=""></a><br>
<a id="hyperlink{{i}}" href="" ></a>
</div>
</td>
</tr>
</tbody>
{% endfor %}
</table>
Pagination:
{% if empty == False %}
function paginate(page){
var val = parseInt(document.getElementById("currentpage").innerHTML);
if(page=='Next'){
page = val + 1;
} else if(page=='Previous'){
page = val - 1;
} else{
page = parseInt(page);
}
if(val!=page){
for(var j = 0; j<ergebnisliste.length; j++){
if(j>=(page-1)*10 && j<10*page){
// document.geElementById("header").style = "display:table";
document.getElementById("cardmb3n" + j).style = "display:block";
}else{
// document.geElementById("header").style = "display:none";
document.getElementById("cardmb3n" + j).style = "display:none";
}
}
........some code.........
}
}
{% endif %}

found a solution: document.getElementById("cardmb3n" + j).style = "display:table-row";

Template for Image grid and select

I am working on a website withDjango, and I would like to make a page where:
There is a table listing all the images of a model
There are two available space two show the images selected by the user
Example:
image grid display
Currently, in my template I produce the table like that:
<table class="table table-striped table-advance table-hover">
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
{% for imagemodel in imagemodel %}
<tr>
<td>{{ imagemodel.image }}</td>
<td>{{ imagemodel.date_taken }}</td>
<td>{{ imagemodel.image.url }}</td>
</tr>
{% endfor %}
</table>
I don't know what would be the best way to make my wish feasable:
Is it possible to do that only with javascript ? or only html ?
Should I work through my django view ?
Many thanks for your help, I am lost :/
Cheers.

I found my solution pure javascript:
var image1 ='';
var tbl = document.getElementById("galleryTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 2; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () { getval(this); };
}
}
function getval(cel) {
image1 = tbl.rows[cel.parentNode.rowIndex].cells[2].innerHTML;
document.getElementById("2x2_topleft_image_tag").src=image1;
}

Sum table column with JQuery

I have a table of All Sales, with the Client's Name, the date and the Sale Price.
I have a script for allowing a User to search through the table, but I would also like a script that returns a total for all the Sale Prices visible in the table.
e.g. If a User searches for T.Toe, then the script returns the sum of all Sale Prices for T.Toe.
code:
<table class="well table table-condensed small" id="academy">
<tr>
<td colspan="3">
<input type="text" id="search_academy" placeholder=" quick search" autocomplete="off">
</td>
<td><input type='text' style="width: 30px;" id='sum'></td>
</tr>
{% for sale in academy|sort(attribute="sale_date", reverse=True) %}
{% if sale.price > 0 %}
<tr class="success">
{% else %}
<tr class="danger">
{% endif %}
<th>{{ sale.sale_date.strftime('%d-%m-%Y') }}</th>
{% if sale.client %}
<th>{{ sale.client }}</th>
{% else %}
<th>{{ sale.concept }}</th>
{% endif %}
<th>{{ sale.club }}</th>
<th class="prices">{{ sale.price }}</th>
</tr>
{% endfor %}
</table>
JQuery for live search over the table and returning a sum of the searched cells:
EDIT:
Thanks to #pointy and #user4621032 the script currently is:
<script>$("#search_academy").keyup(function () {
var value = this.value.toLowerCase().trim();
$("#academy").find("tr").each(function (index) {
if (!index) return;
var id = $(this).find("th").text().toLowerCase().trim();
$(this).toggle(id.indexOf(value) !== -1);
});
var sum = 0;
$('.prices').each(function () {
sum += parseFloat($(this).text());
});
$('#sum').val(sum);
});
</script>
I changed the parseInt to parseFloat to keep 1 decimal place.
This does return a sum of the all cells in the column with the .prices class. However I am looking for the script to return the sum of only the .prices cells returned via the User search in #search_academy.
Thanks!

replace
sum += parseInt(this.innerHTML);
ro
sum += parseInt($(this).text());