How can maintain footer template fields while scrolling aspnetPlease help how can maintain footer fields while scrolling Because when I am searching i would like to display footers as wellThanks in advancelt Page Language34vb34 AutoEventWireup34false34 CodeBehind34SearchStudentdataaspxvb34 Inherits34SulaSignarSearchStudentdata34 gtltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitle

Hi makumbiSet the FooterRow TableSection property in the GridView to access the tfoot in jQueryRefer below exampleDatabaseFor this example I have used of Northwind database that you can download using the link given belowDownload Northwind DatabaseHTMLltdivgt lttable class34autostyle134gt lttrgt lttdgtampnbsplttdgt lttdgtampnbsplttdgt lttdgtampnbsplttdgt lttdgtampnbsplttdgt lttd rowspan34234gtampnbsplttdgt lttrgt lttrgt lttd colspan34534gt ltaspUpdatePanel ID34UpdatePanel234 runat34server34gt ltContentTemplategt ltaspScriptManager ID34ScriptManager134 runat34server34gt ltaspScriptManagergt ltaspGridView ID34gvCustomers34 runat

Keep (Maintain) jQuery DataTable Footer after Header on Scroll using jQuery

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Sep 01, 2022 12:16 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2613
Sample Code: Download

How can maintain footer template fields while scrolling asp.net

Please help how can maintain footer fields while scrolling. Because when I am searching i would like to display footers as well

Thanks in advance

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SearchStudentdata.aspx.vb" Inherits="SulaSignar.SearchStudentdata" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .dataTables_scrollHead {
            width: 100% !important;
        }
 
        .dataTables_scrollHeadInner {
            width: 100% !important;
        }
 
        .dataTables_scrollBody {
            width: 100% !important;
        }
        .auto-style1 {
            height: 20px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#StudentGrid').removeAttr('width').DataTable({
                bFilter: true,
                bSort: true,
                scrollY: "550px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: false,
            });
        });
    </script>
</head> 
<body>
    <form id="form1" runat="server">
        <div>
            <table class="auto-style1">
                <tr>
                    <td></td>
                    <td rowspan="2">&nbsp;</td>
                </tr>
                <tr>
                    <td>
                      <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:GridView ID="StudentGrid" runat="server" AutoGenerateColumns="False" CellSpacing="1" ClientIDMode="Static" EnableSortingAndPagingCallbacks="True" ShowFooter="True" Width="150px">
            <Columns>
                    <asp:ButtonField CommandName="Staff" HeaderText="Staff" Text="Staff" />
                <asp:TemplateField HeaderText="Prno" SortExpression="account">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("admno") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click1" Text="AddNew" />
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Admno" runat="server" Text='<%# Bind("admno") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Patient Name" SortExpression="Name">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Name") %>' Height="18px" Width="261px"></asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="Namesf" runat="server" Width="263px"></asp:TextBox>
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Age">
                    <FooterTemplate>
                        <asp:TextBox ID="FAge" runat="server" Width="29px"></asp:TextBox>
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCategory2" runat="server" Text='<%# Bind("Age") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                    <asp:TemplateField HeaderText="PType">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="DdlPtype" runat="server">
                                <asp:ListItem>None</asp:ListItem>
                                <asp:ListItem>New</asp:ListItem>
                                <asp:ListItem>Old</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("STDTYPE") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                <asp:TemplateField HeaderText="Phone">
                    <FooterTemplate>
                        <asp:TextBox ID="FPhone" runat="server"></asp:TextBox>
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCategory3" runat="server" Text='<%# Eval("Phone") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                    <asp:TemplateField HeaderText="Addresss" SortExpression="address">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("address") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="FAddress" runat="server"></asp:TextBox>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("address") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date" SortExpression="Dates">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Dates") %>' Height="16px" Width="70px"></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="FDates" runat="server" Width="66px"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>
                <asp:TemplateField HeaderText="Sex">
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlSexF" runat="server" DataSourceID="SqlDataSource1SEXD" DataTextField="Sex" DataValueField="Sex" >
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="SqlDataSource1SEXD" runat="server" ConnectionString="<%$ ConnectionStrings:TRIALSIGNARConnectionString %>" SelectCommand="SELECT DISTINCT Sex FROM Student"></asp:SqlDataSource>                       
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCategory4" runat="server" Text='<%# Eval("Sex") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                    <asp:ButtonField CommandName="Payment" HeaderText="Payment" Text="Paydetails" />            
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        &nbsp;</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Sep 01, 2022 02:59 AM
Report

Hi makumbi,

Set the FooterRow TableSection property in the GridView to access the tfoot in jQuery.

Refer below example.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div>
    <table class="auto-style1">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td rowspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="5">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:ScriptManager ID="ScriptManager1" runat="server">
                        </asp:ScriptManager>
                        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CellSpacing="1" ClientIDMode="Static"
                            EnableSortingAndPagingCallbacks="True" ShowFooter="True" Width="600px">
                            <Columns>
                                <asp:ButtonField CommandName="Staff" HeaderText="Staff" Text="Staff" />
                                <asp:TemplateField HeaderText="Name">
                                    <FooterTemplate>
                                        <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblName" runat="server" Text='<%# Bind("ContactName") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="City">
                                    <FooterTemplate>
                                        <asp:TextBox ID="txtCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblCity" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Country">
                                    <FooterTemplate>
                                        <asp:TextBox ID="txtCountry" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblCountry" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:ButtonField CommandName="Payment" HeaderText="Payment" Text="View" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
        <tr>
            <td colspan="5">&nbsp;</td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .auto-style1 { width: 600px; border-style: solid; border-width: 2px; }
    .dataTables_scrollHead { width: 600px !important; }
    .dataTables_scrollHeadInner { width: 600px !important; }
    .dataTables_scrollBody { width: 600px !important; }
</style>
<script type="text/javascript">
    $(function () {
        $('#gvCustomers tfoot tr').appendTo('#gvCustomers thead');
        $('#gvCustomers').removeAttr('width').DataTable({
            bFilter: true,
            bSort: true,
            scrollY: "250px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: false,
            orderCellsTop: true
        });
    });
</script>

Namespaces

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT * FROM Customers";
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataTable dt = new DataTable())
                    {
                        sda.Fill(dt);
                        gvCustomers.DataSource = dt;
                        gvCustomers.DataBind();
                        gvCustomers.UseAccessibleHeader = true;
                        gvCustomers.FooterRow.TableSection = TableRowSection.TableFooter;
                        gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader;
                    }
                }
            }
        }
    }
}

Screenshot

Keep (Maintain) jQuery DataTable Footer after Header on Scroll using jQuery

Company

Explore

Follow us

Contact Us