How to fix table headers (fixed header) for ASP

[Abstract] This article describes how to fix the table header (fixed header), and provides detailed sample code for reference.

You render a table in HTML (perhaps a GridView or a repeater), and if the table has too many rows, you have to drag the East scroll bar down, but once you drag the scroll bar downward, the header information disappears. See Specific.

When you drag the scroll bar downward, the header information disappears:

In this article, I'll show you how to fix a table header. There are many ways to do this on the web, but the basic principles of these methods are the same. is to use a div to copy the information from the header to a div above the body of the table.

1	<div> Table head </div>
2	<div> Watch body </div>

The scroll bar is only in the body Div, so dragging the body div will not affect the header div.

After my experiment, the following two specific methods are useful, respectively, for ASP. Repeater control and GridView control.

(i) for repeater controls:

WebForm1.aspx

<%@ page language= "C #" autoeventwireup= "true" codebehind= "WebForm1.aspx.cs" inherits= "Webapplication1.webform1"% ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Note that if you want to align the header with each column of the table, the table's style= "table-layout:fixed" should not be less.
C # code:
Using system;using system.web.ui;using system.data;namespace webapplication1{public partial class WebForm1:System.We B.ui. Page {protected void Page_Load (object sender, EventArgs e) {if (!                Page.IsPostBack) {DataTable dt = new DataTable (); Dt.                Columns.Add (New DataColumn ("AccountNumber")); Dt.                                                   Columns.Add (New DataColumn ("AccountName")); Dt.                Columns.Add (New DataColumn ("City")); Dt.                Columns.Add (New DataColumn ("Country")); DataRow dr = dt.                NewRow ();                 dr["AccountName"] = "Test1";                 dr["AccountNumber"] = "001";                 dr["country"] = "China";                 dr["City" = "Beijing"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                dr["AccountName"] = "Test2";                dr["AccountNumber"] = "002";                 dr["country"] = "China"; dr["CiTy "] =" Shanghai "; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                 dr["AccountName"] = "Test3";                 dr["AccountNumber"] = "003";                 dr["country"] = "The Nederlands";                 dr["City" = "Amsterdam"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                 dr["AccountName"] = "Test4";                 dr["AccountNumber"] = "004";                 dr["country"] = "France";                 dr["City" = "Paris"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                 dr["AccountName"] = "TEST5";                 dr["AccountNumber"] = "005";                dr["country"] = "Spain";                 dr["City" = "Barcelona"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                 dr["AccountName"] = "TEST6";                 dr["AccountNumber"] = "006";                 dr["country"] = "China";                 dr["City" = "Shanghai"; Dt. Rows.aDD (DR);                Reapeter1.datasource = DT;            Reapeter1.databind (); }        }    }}
The final effect is:
(ii) for the GridView control:
Webform2.aspx
<%@ page language= "C #" autoeventwireup= "true" codebehind= "WebForm2.aspx.cs" inherits= "Webapplication1.webform2"% ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The main use of the jquery and Scrollablegridplugin.js plug-ins. Scrollablegridplugin.js plugin is very useful, want to which GridView fixed the table header, only need to add the following code in the script to start. The first parameter sets the height of the table, the second sets the table width, and the units are PX. These two parameters can also be omitted, and the default values are set in Scrollablegridplugin.js.

 
  

  
   
 
    
 
     
1
 
     
$ (document). Ready (function () { 
 
    
 
    
 
     
2
 
     
$ (' #<%=gridview1.clientid%> '). scrollable ({ 
 
    
 
    
 
     
3
 
     
scrollheight:  
 
    
 
    
 
     
4
 
     
Width:  
 
    
 
    
 
     
5
 
     
});
 
    
 
    
 
     
6
 
     
});
 
    
 
   
 
  
The code for Scrollablegridplugin.js is:
(function ($) {$.fn.        scrollable = function (options) {var defaults = {scrollheight:300, width:0};        var options = $.extend (defaults, options);            Return This.each (function () {var Grid = $ (this). Get (0);            var gridwidth = grid.offsetwidth;            var gridheight = grid.offsetheight;            var headercellwidths = new Array (); for (var i = 0; i < grid.getelementsbytagname ("TH"). Length; i++) {Headercellwidths[i] = Grid.getelement            Sbytagname ("TH") [I].offsetwidth;            } grid.parentNode.appendChild (Document.createelement ("div"));            var parentdiv = Grid.parentnode;            var table = document.createelement ("table"); for (i = 0; i < grid.attributes.length; i++) {if (grid.attributes[i].specified && grid.attribut Es[i].name! = "id") {table.setattribute (Grid.attributes[i].name, Grid.attributes[i].value);            }} table.style.cssText = Grid.style.cssText;            Table.style.width = gridwidth + "px";            Table.appendchild (Document.createelement ("tbody"));            Table.getelementsbytagname ("tbody") [0].appendchild ("Grid.getelementsbytagname (" TR ") [0]);            var cells = Table.getelementsbytagname ("TH");            var gridrow = grid.getelementsbytagname ("TR") [0];                for (var i = 0; i < cells.length; i++) {var width; if (Headercellwidths[i] > Gridrow.getelementsbytagname ("TD") [i].offsetwidth) {width = Headercellwid                Ths[i];                } else {width = gridrow.getelementsbytagname ("TD") [I].offsetwidth;                } cells[i].style.width = parseint (width-3) + "px";            Gridrow.getelementsbytagname ("TD") [I].style.width = parseint (width-3) + "px";            } parentdiv.removechild (GRID); VAr dummyheader = document.createelement ("div");            Dummyheader.appendchild (table);            Parentdiv.appendchild (Dummyheader); if (options. Width > 0) {gridwidth = options.            Width;            } var scrollablediv = document.createelement ("div"); if (parseint (gridheight) > Options.            scrollheight) {gridwidth = parseint (gridwidth) + 17; } ScrollableDiv.style.cssText = "overflow:auto;height:" + options.            ScrollHeight + "Px;width:" + gridwidth + "px";            Scrollablediv.appendchild (GRID);        Parentdiv.appendchild (SCROLLABLEDIV);    }); };}) (JQuery);
The code for C # is:
Using system;using system.web.ui;using system.data;namespace webapplication1{public partial class WebForm2:System.We B.ui. Page {protected void Page_Load (object sender, EventArgs e) {if (!                Page.IsPostBack) {DataTable dt = new DataTable (); Dt.                Columns.Add (New DataColumn ("AccountNumber")); Dt.                Columns.Add (New DataColumn ("AccountName")); Dt.                Columns.Add (New DataColumn ("City")); Dt.                Columns.Add (New DataColumn ("Country")); DataRow dr = dt.                NewRow ();                dr["AccountName"] = "Test1";                dr["AccountNumber"] = "001";                dr["country"] = "China";                dr["City" = "Beijing"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                dr["AccountName"] = "Test2";                dr["AccountNumber"] = "002";                dr["country"] = "China";                dr["City" = "Shanghai"; Dt. RowS.add (DR); Dr = dt.                NewRow ();                dr["AccountName"] = "Test3";                dr["AccountNumber"] = "003";                dr["country"] = "The Nederlands";                dr["City" = "Amsterdam"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                dr["AccountName"] = "Test4";                dr["AccountNumber"] = "004";                dr["country"] = "France";                dr["City" = "Paris"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                dr["AccountName"] = "TEST5";                dr["AccountNumber"] = "005";                dr["country"] = "Spain";                dr["City" = "Barcelona"; Dt.                Rows.Add (DR); Dr = dt.                NewRow ();                dr["AccountName"] = "TEST6";                dr["AccountNumber"] = "006";                dr["country"] = "China";                dr["City" = "Shanghai"; Dt.                Rows.Add (DR);       Gridview1.datasource = DT;         Gridview1.databind (); }        }    }}


This article transferred from: http://dotnet.9sssd.com/aspnet/art/806

How to fix table headers (fixed header) for ASP