Reputation: 925
I am using simple Html table for showing data.every thing is going smooth when there is upto 100 row in table but when the number of rows increase from 100 rows then the calculation takes too much time
Here is my jquery code
$('body').on('keyup', 'input[class*="quantity"],input[class*="unit-price"],input[class*="gst-tax-value"],input[class*="new-price-value"]', function () {
// alert("Called");
var tr = $(this).parents('tr');
// var ths = $(this);
/////////variables for classes///////
var input_quantity_class = '.quantity';
var text_gst_amount_class = '.gst-amount';
var input_gst_tax_value_class = '.gst-tax-value';
var input_gst_tax_amount_class = '.gst-tax-amount-value';
var input_unitprice_class = '.unit-price';
var input_unitprice_tax_class = '.new-price-value';
var text_totalprice_without_gst_class = '.total-price-without-gst';
var input_totalprice_without_gst_class = '.total-price-without-gst-value';
var text_totalprice_class = '.total-price';
var input_totalprice_class = '.total-price-value';
var is_usd = $('input[class*="rdo-currency-clx"]:checked').val();
////////defining variables////////
var quantity = 0;
var unit_price = 0;
var gst_percentage = 0;
var gst_amount = 0;
var total_gst_amount = 0;
var price_without_gst = 0;///////unitprice with/without gst/////
var total_with_gst = 0; //unitprice + gst_amount * quantity///
var total_wod_gst = 0; //unitprice * quantity/
var total_price = 0; //unitprice * quantity//
var unitprice_withgst = 0;
//////////getting values//////////
quantity = (tr.find(input_quantity_class).val() != undefined || tr.find(input_quantity_class).val() != "") ? parseFloat(tr.find(input_quantity_class).val()) : 0;
unit_price = (tr.find(input_unitprice_class).val() != undefined || tr.find(input_unitprice_class).val() != "") ? parseFloat(tr.find(input_unitprice_class).val()) : 0;
gst_percentage = (tr.find(input_gst_tax_value_class).val() != undefined || tr.find(input_gst_tax_value_class).val() != "") ? parseFloat(tr.find(input_gst_tax_value_class).val()) : 0;
gst_amount = unit_price * gst_percentage / 100;
total_gst_amount = gst_amount * quantity;
total_price = unit_price * quantity;
total_with_gst = total_price + total_gst_amount;
total_wod_gst = total_price;
unitprice_withgst = unit_price + gst_amount;
////////amount figur masking///////////
gst_amount = (is_usd == 1) ? Math.round(gst_amount) : gst_amount.toFixed(2);
total_gst_amount = (is_usd == 1) ? Math.round(total_gst_amount) : total_gst_amount.toFixed(2);
// total_price = (is_usd == 1)?Math.round(total_price):accounting.formatMoney(total_price.toFixed(2), "", 2, ",", ".");
total_with_gst = (is_usd == 1) ? Math.round(total_with_gst) : total_with_gst.toFixed(2);
total_wod_gst = (is_usd == 1) ? Math.round(total_wod_gst) : total_wod_gst.toFixed(2);
unitprice_withgst = (is_usd == 1) ? Math.round(unitprice_withgst) : unitprice_withgst.toFixed(2);
if (!isNaN(unit_price) && unit_price != undefined && unit_price != "") {
tr.find(text_gst_amount_class).html(accounting.formatMoney(total_gst_amount, "", 2, ",", "."));
tr.find(input_gst_tax_amount_class).val(total_gst_amount);
tr.find(text_totalprice_without_gst_class).html(accounting.formatMoney(total_wod_gst, "", 2, ",", "."));
tr.find(input_totalprice_without_gst_class).val(total_wod_gst);
tr.find(text_totalprice_class).html(accounting.formatMoney(total_with_gst, "", 2, ",", "."));
tr.find(input_totalprice_class).val(total_with_gst);
getFooterTotal();
getGrandTotal();
}
});
//calculations of footer total of table
function getFooterTotal() {
var is_usd = $('input[class*="rdo-currency-clx"]:checked').val();
var rows = $('tbody.databody tr');
var gst_footer_total = 0;
var price_footer_total = 0;
var totalprice_withgst_footer_total = 0;
var totalprice_wotgst_footer_total = 0;
$(rows).each(function (i, val) {
tr = $(this);
is_checked = tr.find('input.item-value').val();
if (is_checked == 1) {
gst_footer_total += (isNaN(tr.find('input.gst-tax-amount-value').val()) || tr.find('input.gst-tax-amount-value').val() == undefined || tr.find('input.gst-tax-amount-value').val() == "") ? 0 : parseFloat(tr.find('input.gst-tax-amount-value').val());
price_footer_total += (isNaN(tr.find('input.new-price-value').val()) || tr.find('input.new-price-value').val() == undefined || tr.find('input.new-price-value').val() == "") ? 0 : parseFloat(tr.find('input.new-price-value').val());
totalprice_wotgst_footer_total += (isNaN(tr.find('input.total-price-without-gst-value').val()) || tr.find('input.total-price-without-gst-value').val() == undefined || tr.find('input.total-price-without-gst-value').val() == "") ? 0 : parseFloat(tr.find('input.total-price-without-gst-value').val());
totalprice_withgst_footer_total += (isNaN(tr.find('input.total-price-value').val()) || tr.find('input.total-price-value').val() == undefined || tr.find('input.total-price-value').val() == "") ? 0 : parseFloat(tr.find('input.total-price-value').val());
}
});
gst_footer_total = (is_usd == 1) ? Math.round(gst_footer_total) : gst_footer_total.toFixed(2);
price_footer_total = (is_usd == 1) ? Math.round(price_footer_total) : price_footer_total.toFixed(2);
totalprice_wotgst_footer_total = (is_usd == 1) ? Math.round(totalprice_wotgst_footer_total) : totalprice_wotgst_footer_total.toFixed(2);
totalprice_withgst_footer_total = (is_usd == 1) ? Math.round(totalprice_withgst_footer_total) : totalprice_withgst_footer_total.toFixed(2);
$('body').find('td#td-gst-amount').html(accounting.formatMoney(gst_footer_total, "", 2, ",", "."));
$('body').find('td#td-unit-gst').html(accounting.formatMoney(price_footer_total, "", 2, ",", "."));
$('body').find('#span-total-wot-gst').html(accounting.formatMoney(totalprice_wotgst_footer_total, "", 2, ",", "."));
$('body').find('input.total_wot_gst').val(totalprice_wotgst_footer_total);
$('body').find('#span-total-with-gst').html(accounting.formatMoney(totalprice_withgst_footer_total, "", 2, ",", "."));
$('body').find('input.total_with_gst').val(totalprice_withgst_footer_total);
}
///////calculation of grand total//////////////
function getGrandTotal() {
var is_gst = $('input.gst_val_clx').val();
var is_usd = $('input[class*="rdo-currency-clx"]:checked').val();
var amount_with_gst = parseFloat($('input.total_with_gst').val());
// alert(amount_with_gst);return;
var amount_without_gst = parseFloat($('input.total_wot_gst').val());
var freight_amount = parseFloat($('input.freight_amount').val());
var discount_amount = parseFloat($('input.discount_amount').val());
var freight_operation = $('input[class*="charges_operation"]:checked').val();
var discount_operation = $('input[class*="discount_operation"]:checked').val();
// alert(discount_operation);
var grand_total = (is_gst == 1) ? amount_with_gst : amount_without_gst;
// console.log(is_gst+" Freight Operation "+freight_operation +" Discount Operation "+discount_operation+" Total "+amount_with_gst);return;
if (isNaN(amount_with_gst) || amount_with_gst == undefined || amount_with_gst == "")
amount_with_gst = 0;
if (isNaN(amount_without_gst) || amount_without_gst == undefined || amount_without_gst == "")
amount_without_gst = 0;
if (isNaN(discount_amount) || discount_amount == undefined || discount_amount == "")
discount_amount = 0;
if (isNaN(freight_amount) || freight_amount == undefined || freight_amount == "")
freight_amount = 0;
if (is_gst == 1) {
if (freight_operation == 1)
grand_total += freight_amount;
else
grand_total -= freight_amount;
if (discount_operation == 1)
grand_total += discount_amount;
else
grand_total -= discount_amount;
} else {
if (freight_operation == 1)
grand_total += freight_amount;
else
grand_total -= freight_amount;
if (discount_operation == 1)
grand_total += discount_amount;
else
grand_total -= discount_amount;
}
grand_total = (is_usd == 1) ? Math.round(grand_total) : grand_total.toFixed(2);
$('td span.total-amount').html(accounting.formatMoney(grand_total, "", 2, ",", "."));
$('input.total-amount-value').val(grand_total);
}
can you please suggest me how to improve the speed of calculating data run time in jquery thanks
Here is My Html table Image:
I am calculating each row and also it grand total
Upvotes: 1
Views: 190
Reputation: 189
Your code looks not so bad to me.
One improvement I see is that you can avoid some unnecessary calls to find()
cause it is a "expensive" jQuery() operation.
quantity = (tr.find(input_quantity_class).val() != undefined || tr.find(input_quantity_class).val() != "") ? parseFloat(tr.find(input_quantity_class).val()) : 0;
tr.find(input_quantity_class)
is called 2 times (one for undefined
check and one for if or else)
Avoid these multiple find()
calls by "caching" the result of find()
:
quantityVal = tr.find(input_quantity_class).val();
quantity = (quantityVal != undefined || quantityVal != "") ? parseFloat(quantityVal) : 0;
If you do like this everywhere it should boost your script. Performance example can be found in this answer. Take also a look into Optimize Selectors to be sure to use the fastest selector possible.
Upvotes: 2