In my previous example, i have told you how to add confirm pop up and Repeater server control in ASP.NET using jQuery. In this example, I will elaborate my last example and shows you how to display total price in footer of Repeater control using jQuery.
Here’s an example.
Design code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display total amount in Repeater footer in asp.net using jquery</title>
<style>
#table1
{
width: 500px;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #666;
}
#table1 th
{
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 29px;
text-align: left;
padding-left: 10px;
background-color: #fafafa;
}
#table1 td
{
border-bottom: 1px solid #eee;
padding-left: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var Amount = 0;
$("#table1 tr").each(function (index) {
var value = $(this).find("td:nth-child(3)").html();
if (value != null && value != "" && !isNaN(value))
Amount = Amount + parseFloat($(this).find("td:nth-child(3)").html());
});
$("#total").text("Total Price: " + Amount.toFixed(2));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="table1">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# ((Book)Container.DataItem).Title %>
</td>
<td>
<%# ((Book)Container.DataItem).Author %>
</td>
<td>
<%# ((Book)Container.DataItem).Price %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
<tfoot>
<tr>
<th colspan="2">
 
</th>
<th>
<div id="total">
</div>
</th>
</tr>
</tfoot>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Code behind
protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = Display();
Repeater1.DataBind();
}
public List<Book> Display()
{
List<Book> Obj = new List<Book>()
{
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 101.1F},
new Book{ Title="ASP.NET Control", Author="Aamir Hasan", Price= 120.1F},
new Book{ Title="ASP.NET Development", Author="Aamir Hasan", Price= 140.1F},
new Book{ Title="ASP.NET Desing Pattern", Author="Aamir Hasan", Price= 50.1F},
new Book{ Title="Sharepoint 2010 Administration", Author="Aamir Hasan", Price= 70.1F},
new Book{ Title="Sharepoint 2010 Development", Author="Aamir Hasan", Price= 80.1F},
new Book{ Title="jQuery", Author="Aamir Hasan", Price= 90.1F},
new Book{ Title="HTML 5", Author="Aamir Hasan", Price= 20.1F},
new Book{ Title="Javascript", Author="Aamir Hasan", Price= 40.1F},
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 70.1F}
};
return Obj;
}
public class Book
{
public string Title { get; set; }
public string Author { get; set; }
public float Price { get; set; }
}
Output
Download
Repeater-jQuery-Confirm-Footer-totalAmount.rar (1.82 kb)
See Live Demo