Share via

fix header

RAVI 1,076 Reputation points
2023-12-21T13:24:52.01+00:00

Hello

This is sql code

/****** Object:  Table [dbo].[Table1]    Script Date: 12/21/2023 14:31:14 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Table1](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[Field1] [varchar](150) NULL,
	[Field2] [varchar](50) NULL,
	[Field3] [float] NULL,
	[Field4] [varchar](50) NULL,
 CONSTRAINT [PK_Table1] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[Table1] ON
INSERT [dbo].[Table1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (1, N'B1/A1', N'APPLE', 10, N'10')
INSERT [dbo].[Table1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (2, N'B2/23-24', N'MANGO', 5, N'3')
INSERT [dbo].[Table1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (3, N'B2/23-24', N'BANANA', 5, N'2')
INSERT [dbo].[Table1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (4, N'B3/B1', N'CHERRY', 2, N'20')
INSERT [dbo].[Table1] ([ID], [Field1], [Field2], [Field3], [Field4]) VALUES (5, N'B4/A2', N'GUAVA', 4, N'25')
SET IDENTITY_INSERT [dbo].[Table1] OFF

This is my aspx page

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

<html>

<head runat="server">


<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="dt.js"></script>
<link rel="stylesheet" type="text/css" href=dt.css />
   

   <script type="text/javascript">
     
     $(document).ready(function() {
    $('#list').DataTable( {
    
    lengthMenu: [
            [1500, 1000, 500, 200, -1],
            [1500, 1000, 500, 250, 'All'],
        ],
    
        initComplete: function () {
            this.api().columns("0").every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $("#Span1").empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, true )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
            
            
             this.api().columns("1").every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $("#Span2").empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, true )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
            
            
             this.api().columns("2").every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $("#Span3").empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, true )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
            
            
             
//           next
            
        }
    } );
} );
</Script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
    
    <TABLE>
  <TR>
   <TD style="WIDTH: 100px; height: 31px;"><span style="color: darkcyan; font-family: Calibri"><strong>FILTER FIELD 1</strong></span></TD>
 <TD style="WIDTH: 100px; height: 31px;"><span style="color: darkcyan; font-family: Calibri"><strong>FILTER FIELD 2</strong></span></TD>
 <TD style="WIDTH: 100px; height: 31px;"><span style="color: darkcyan; font-family: Calibri"><strong>FILTER FIELD 3</strong></span></TD>
  
  </TR>
  <TR>
   <TD onChange="calc()"; style="WIDTH: 100px;font-size:12px; font-weight:bold;font-family:Calibri;color:Black;"> <span id="Span1"></span></TD>
  <TD onChange="calc()"; style="WIDTH: 100px;font-size:12px; font-weight:bold;font-family:Calibri;color:Black;"> <span id="Span2"></span></TD>
  <TD onChange="calc()"; style="WIDTH: 100px;font-size:12px; font-weight:bold;font-family:Calibri;color:Black;"> <span id="Span3"></span></TD>
 
    
  </TR> </TABLE>
    
       <div class="e_list">
    <asp:Panel runat="server" ID="Panel1">
      <table cellspacing="0" class="myClass" id="list" 
      style="width:100px;font-family:Calibri;font-size:11px;border-collapse: collapse; border: 1px solid black;">
        <thead> 
          <tr > 
           <td style="border-collapse: collapse; border: 1px solid black; background: #FAC794;">FIELD 1</td>
           <td style="border-collapse: collapse; border: 1px solid black; background: #FAC794;">FIELD 2</td>
           <td style="border-collapse: collapse; border: 1px solid black; background: #FAC794;">FIELD 3</td>
           <td style="border-collapse: collapse; border: 1px solid black; background: #FAC794;">FIELD 4</td>
        </tr>
        </thead>
        <tbody style="border-collapse: collapse; border: 1px solid black;width">
         <asp:Repeater ID="Repeater1" runat="server" >
          <ItemTemplate>
          <tr> 
         <td style="border-collapse: collapse; border: 1px solid black;"><%#Eval("Field1")%></td>
           <td style="border-collapse: collapse; border: 1px solid black;"><%#Eval("Field2")%></td>
             <td style="border-collapse: collapse; border: 1px solid black;"><%#Eval("Field3")%></td>
              <td style="border-collapse: collapse; border: 1px solid black;"><%#Eval("Field4")%></td>
         </tr>
        </ItemTemplate>
        </asp:Repeater>
        </tbody>
       <tfoot>
      
       </tfoot>
      </table>
      </asp:Panel>

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

This is my c# code

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.IO;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Text;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            
            DataTable dt = new DataTable();
            SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString);
            con1.Open();
            SqlCommand cmd1 = new SqlCommand("select * from Table1 order by Field1 asc", con1);
            SqlDataAdapter ada1 = new SqlDataAdapter(cmd1);
            ada1.Fill(dt);
            Repeater1.DataSource = dt;
            Repeater1.DataBind();
            con1.Close();
            con1.Dispose();
        }
    }







}

I want to freeze header row how to do so while scrolling

Developer technologies | ASP.NET | Other
0 comments
Answer accepted by question author
  1. QiYou-MSFT 4,341 Reputation points Microsoft External Staff
    2023-12-22T06:20:15.65+00:00

    Hi @RAVI

    You can change <thead> to <thead style="position:sticky;top:0;">.

    I filled in the database to show it better.

    Head1

    Best regards,
    Qi You

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Cloudoire Academy 23,595 Reputation points Volunteer Moderator
    2023-12-21T16:47:03.59+00:00

    Thanks for posting your question in the Microsoft Q&A forum.

    You can use the FixedHeader extension from the DataTables website.
    https://datatables.net/extensions/fixedheader/

    ** Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful **

    0 comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.