I have a dynamic HTML Table which gets update for every 60 seconds through fetching JSON data from external API by Vue.js. As I am developing a simple dashboard, I have cards. So, one of the card has to display the sum of a particular column from my HTML Table.
Also I am having switching buttons to hide rows based on the keyword. So I am trying to fill that card after the particular button clicked, then I can get the total order of the column for particular orders.
My Vue functions were written as "onLoad" functions, so on page load I get my table filled with data.
But, when I try to get the sum of the total of the column, it throws the error "Row : null" and does not display the message in my card's <p> element, but I can see the rows on condition.
What am I doing wrong?
Below is my code:
// Show only Paypal orders rows by hidimg cash orders row
$(document).on('click', '#btn1', function() {
$(".table tr:contains('cod')").hide();
// Getting the total of the column to display in the card
var table = document.getElementById("table"),
sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
sumVal = sumVal + parseInt(table.rows[i].cells[4].innerHTML);
}
document.getElementById("output").innerHTML = "Sum Value =" + sumVal;
});
// Show only cash orders rows by hidimg paypal orders row
$(document).on('click', '#btn2', function() {
$(".table tr:contains('cod')").show();
$(".table tr:contains('ppec_paypal')").hide();
});
$(document).on('click', '#btn3', function() {
$(".table tr:contains('cod')").show();
$(".table tr:contains('ppec_paypal')").show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Cards -->
<div class="main-section">
<div class="dashbord" id="app1">
<div class="icon-section">
<small>Total amount for tdoay Orders</small>
<p v-for="totalsales, index in totalSales">
{{ totalsales.total_sales }}</p>
</div>
</div>
<div class="dashbord dashbord-orange">
<div class="icon-section">
<small>Total Amount - Cash By Hand</small>
<p id="output"> </p>
</div>
</div>
<!--Blocks Ends-->
<!--Navigation Buttons - All orders / Paypal / Cash -->
<div>
<br> <br>
<button type="button" class="btn btn-primary" id="btn1">Paypal Orders</button>
<button type="button" class="btn btn-primary" id="btn2">Cash Orders</button>
<button type="button" class="btn btn-primary" id="btn3">All Orders</button>
</div>
<div class="container mt-5" id="app">
<table class="table table-bordered 2px">
<thead class="thead-dark">
<tr>
<th scope="col">Order id</th>
<th scope="col">Total</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr v-for="order, index in orders">
<td>{{ order.id }}</td>
<td>{{ order.total}}</td>
<td>{{ order.payment_method}}</td>
</tr>
</tbody>
</table>
</div>