Remove From My Forums

Gridview footer column total using jquery datatable

Question

User1910487977 posted

The below is the code ...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
   
                               <asp:GridView ID="Grid"  runat="server" 
             EmptyDataText="No Item Found !" AutoGenerateColumns="False"  >
      
           
            <Columns>
            
          
            <asp:TemplateField HeaderText="OrderNo" >
            <ItemTemplate>
            <asp:Label ID="LblOrderNo"  runat="server" Text='<%#Eval("OrderNo") %>'></asp:Label>            
            </ItemTemplate>          
            </asp:TemplateField>             
          

            <asp:TemplateField HeaderText="Product">
            <ItemTemplate>
            <asp:Label ID="LblProduct"  runat="server" Text='<%#Eval("Product") %>' ></asp:Label>
            </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Color" >
            <ItemTemplate>
            <asp:Label ID="LblColor"  runat="server" Text='<%#Eval("Color") %>' ></asp:Label>
            </ItemTemplate>
            </asp:TemplateField>

          

          

            <asp:TemplateField HeaderText="OrderQty" >
            <ItemTemplate>
            <asp:Label ID="LblOrderQty"  runat="server"  Text='<%#Eval("OrderQty") %>' ></asp:Label>
            </ItemTemplate>
            </asp:TemplateField>

           


            
               
            </Columns>          

     </asp:GridView>                         
                                                
                             <div>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" />
    </script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>



    <script type="text/javascript">
$(function () {
    $('[id$=Grid]').prepend($("<thead></thead>").append($('[id$=Grid]').find("tr:first"))).DataTable({
        "responsive": true,
        "sPaginationType": "full_numbers",
    });
    });
    </script>
    <style type="text/css">
        input[type="search"]
        {
            width: 70%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857;
            color: #555;
            background-color: #FFF;
            background-image: none;
            border: 1px solid #CCC;
            border-radius: 4px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }
    </style>


    </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Collections.Specialized;
using System.Text;
using System.Drawing;
using System.IO;
using System.Data;
using System.Net.Mail;

using System.Web.Services;
using System.Web.Script.Services;

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        String strConnString = ConfigurationManager.ConnectionStrings["Con"].ConnectionString;
        SqlConnection con = new SqlConnection(strConnString);

        DataTable dt = new DataTable();

        SqlCommand cmd12 = new SqlCommand(" Select * from Test", con);
        

        SqlDataAdapter da = new SqlDataAdapter(cmd12);
       

        da.Fill(dt);

        Grid.DataSource = dt;
        Grid.DataBind();
    }
}

I need footer total for OrderQty column

Wednesday, October 30, 2019 9:29 AM

All replies

User283571144 posted

Hi UmerFaiz001,

According to your description, I suggest you could try to calculate the OrderQty total value in the code-behind and save it into a hiddenfield.

Then you could get the hiddenfield value and generate a footer row and add it to the jquery datatable's footer by using Footer callback.

More details, you could refer to below codes:

ASPX:

 <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
      
  $(function () {
            $('[id$=Grid]').append('<tfoot><tr><th></th><th></th><th></th><th></th></tr></tfoot>'),
            $('[id$=Grid]').prepend($("<thead></thead>").append($('[id$=Grid]').find("tr:first"))).DataTable({
                "responsive": true,
                "sPaginationType": "full_numbers",
                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
                    };
                     
                    $(api.column(2).footer()).html("total");
                    $(api.column(3).footer()).html($("#HiddenField1").val());
                }     
            }); 

        });
    </script>
    <style type="text/css">
        input[type="search"] {
            width: 70%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857;
            color: #555;
            background-color: #FFF;
            background-image: none;
            border: 1px solid #CCC;
            border-radius: 4px;
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }
    </style>

 <div>
            <asp:GridView ID="Grid" runat="server" EmptyDataText="No Item Found !" AutoGenerateColumns="False" >
                <Columns>
                    <asp:TemplateField HeaderText="OrderNo">
                        <ItemTemplate>
                            <asp:Label ID="LblOrderNo" runat="server" Text='<%#Eval("OrderNo") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Product">
                        <ItemTemplate>
                            <asp:Label ID="LblProduct" runat="server" Text='<%#Eval("Product") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Color">
                        <ItemTemplate>
                            <asp:Label ID="LblColor" runat="server" Text='<%#Eval("Color") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="OrderQty">
                        <ItemTemplate>
                            <asp:Label ID="LblOrderQty" runat="server" Text='<%#Eval("OrderQty") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>

            <asp:TemplateField>
                        <FooterTemplate>
                            <asp:Label ID="Total1" runat="server">Total:</asp:Label>
                        </FooterTemplate>
                    </asp:TemplateField>

                </Columns>
            </asp:GridView>
 
            <asp:HiddenField ID="HiddenField1" runat="server" />

        </div>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
        {

            string str = System.Configuration.ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542ConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(str))
            {
                using (SqlCommand cmd12 = new SqlCommand(" Select * from Test"))
                {
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd12))
                    {
                        cmd12.Connection = con;
                        da.SelectCommand = cmd12;
                        using (DataTable dt = new DataTable())
                        {
                            da.Fill(dt);
                            Grid.DataSource = dt;
                            Grid.DataBind();

                            int total = dt.AsEnumerable().Sum(row => row.Field<int>("OrderQty"));
                            Grid.FooterRow.Cells[1].Text = "Total";
                            HiddenField1.Value= total.ToString();
                        }
                    }
                }
            }
        }

Result:

Best Regards,

Brando

Friday, November 1, 2019 1:49 AM

User-2015242085 posted

Try

<asp:TemplateField HeaderText="OrderNo" >
	<ItemTemplate>
		<asp:Label ID="LblOrderNo"  runat="server" Text='<%#Eval("OrderNo") %>'></asp:Label>            
	</ItemTemplate>
	<FooterTemplate>
		Number of records: <%# Grid.Rows.Count %>
	</FooterTemplate>        
</asp:TemplateField>

Saturday, November 9, 2019 11:55 PM

Asked by:

Gridview footer column total using jquery datatable

Question

All replies