aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Saturday, July 9, 2011 Total Views:  

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">

                            &nbsp

                        </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

Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5