TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Jes Sie
741
1.2k
284.7k
Display Grand Total at the Bottom of a Table in JQUERY
Jul 28 2019 10:38 PM
I have create an MVC project that will display the details of a quotation to a table using JQuery. Below is my mark-up and the jquery itself:
<
div
class
=
"card-body text-secondary"
>
<
div
class
=
"table-responsive-sm"
>
<
table
id
=
"tblEmployee"
class
=
"table table-bordered table-hover"
>
<
thead
>
<
tr
>
<
th
>
Reference #
</
th
>
<
th
>
Damage Name
</
th
>
<
th
>
Damage Condition
</
th
>
<
th
>
Level Code
</
th
>
<
th
>
Labot Cost
</
th
>
<
th
>
Parts Cost
</
th
>
<
th
>
Total Cost
</
th
>
<
th
>
Action
</
th
>
</
tr
>
</
thead
>
<
tbody
>
</
tbody
>
</
table
>
</
div
>
</
div
>
$(document).ready(
function
() {
var
tr;
$.getJSON(
"/QuotationMgt/GetQuotationDetails"
,
function
(json) {
$.each(json,
function
(i, emp) {
var
empid = emp.Id;
tr = $(
'<tr/>'
);
tr.append(
"<td class='Id'>"
+ emp.Id +
"</td>"
);
tr.append(
"<td class='damageName'>"
+ emp.damageName +
"</td>"
);
tr.append(
"<td class='damageCondition'>"
+ emp.damageCondition +
"</td>"
);
tr.append(
"<td class='lvlCode'>"
+ emp.lvlCode +
"</td>"
);
tr.append(
"<td class='text-right'>"
+ emp.laborCost +
"</td>"
);
tr.append(
"<td class='text-right'>"
+ emp.partsCost +
"</td>"
);
tr.append(
"<td class='text-right'>"
+ emp.totalCost +
"</td>"
);
tr.append(
"<td>"
+
"<a Onclick='return false;' class='delete btn btn-sm btn-danger' href=/QuotationMgt/DeleteQuoteItem/"
+ empid +
">Delete</a>"
);
$(
'#tblEmployee'
).append(tr);
});
});
$(
'#tblEmployee'
).on(
'click'
,
'td a.delete'
,
function
() {
var
deleteUrl = $(
this
).attr(
"href"
);
if
(confirm(
"Are you sure wants to delete?"
)) {
$.ajax({
url: deleteUrl, dataType:
"json"
, type:
"POST"
, contentType:
"application/json"
,
error:
function
(err) { alert(
'Unable to delete record.'
); },
success:
function
(response) {
window.location.href =
"/QuotationMgt/CreateQuotationDetail/"
+ @ViewBag.quotationNo;
}
});
}
});
});
Below is the sample result and what I wanted is the GRAND TOTAL to be displayed at the bottom
if this is a gridview in a webform, I can simply use the RowDatabound event to get the grand total. I am just new in MVC and obviously struggling in JQuery.
Any help will be much appreciated.
Reply
Answers (
8
)
how to add link from database without create new aspx page?
How to store any data type in an Array