Thursday, March 2, 2017

How to fix header of table or gridview or datatable without using any plugin and without scroll in table


In this article I am going to tell how fix make table header freeze using javascript and CSS.

You can see live demo below

Name Phone Address
table1 data1 table1 data1 table1 data1
table1 data2 table1 data2 table1 data1
table1 data3 table1 data3 table1 data1
table1 data4 table1 data4 table1 data1
table1 data5 table1 data5 table1 data1
table1 data6 table1 data6 table1 data1
table1 data7 table1 data7 table1 data1
table1 data8 table1 data8 table1 data1
table1 data9 table1 data9 table1 data1
table1 data10 table1 data10 table1 data1
You can see above table header is freezed while we scroll down to the page. For this you have to set the header class 'floatingHeader' and gridview class 'persist-area"' of gridview/datagrid or any other table like :


   1:   <asp:GridView runat="server" HeaderStyle-CssClass="persist-header" CssClass="persist-area" ID="grdView">
   2:          <Columns>
   3:              <asp:TemplateField>
   4:                  <ItemTemplate></ItemTemplate>
   5:              </asp:TemplateField>
   6:              <asp:TemplateField>
   7:                  <ItemTemplate></ItemTemplate>
   8:              </asp:TemplateField>
   9:          </Columns>
  10:      </asp:GridView>

Then define floatHeader style like :

   1:   .floatingHeader {
   2:        position: fixed;
   3:        top: 0;
   4:        visibility: hidden;
   5:      }

Finally wirte javasctip code as below: In the below javascript code we are creating a clone of table header and show/hide on the event of scroll.


   1:  <script>
   2:   function UpdateTableHeaders() {
   3:         $(".persist-area").each(function() {
   4:   
   5:             var el             = $(this),
   6:                 offset         = el.offset(),
   7:                 scrollTop      = $(window).scrollTop(),
   8:                 floatingHeader = $(".floatingHeader", this)
   9:   
  10:             if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
  11:                 floatingHeader.css({
  12:                  "visibility": "visible"
  13:                 });
  14:             } else {
  15:                 floatingHeader.css({
  16:                  "visibility": "hidden"
  17:                 });
  18:             };
  19:         });
  20:      }
  21:   
  22:      // DOM Ready
  23:      $(function() {
  24:   
  25:         var clonedHeaderRow;
  26:   
  27:         $(".persist-area").each(function() {
  28:             clonedHeaderRow = $(".persist-header", this);
  29:             clonedHeaderRow
  30:               .before(clonedHeaderRow.clone())
  31:               .css("width", clonedHeaderRow.width())
  32:               .addClass("floatingHeader");
  33:   
  34:         });
  35:   
  36:         $(window)
  37:          .scroll(UpdateTableHeaders)
  38:          .trigger("scroll");
  39:   
  40:      });
  41:  </script>
That's it finally you will get a table with freeze header:-).

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...