# .NET and More > ASP.NET And ASP.NET Core > VS 2015 Headers gets distorted on searching datatables

## Makumbi

```
<%@ 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>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
            border-style: solid;
            border-width: 2px;
        }

    </style>
         <script type = "text/javascript">
              function askConfirm(msg) {
                  alert(msg)
              }
          </script>
    <script type="text/javascript">
function Showalert() {
alert('Call JavaScript function from codebehind');
}
</script>
   
  <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: 150% !important;
        }
 
        .dataTables_scrollHeadInner {
            width: 150% !important;
        }
 
        .dataTables_scrollBody {
            width: 100% !important;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
    var table = $('#StudentGrid').removeAttr('width').DataTable({
                bFilter: true,
                bSort: true,
                scrollY: "450px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: false,
            });
        });
    </script>


</head>
 
<body>
    <form id="form1" runat="server">
        <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="4">
                      <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" Height="124px" ShowFooter="True" Width="541px">
            <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="5">
                        &nbsp;</td>
                </tr>
                            </table>
        </div>
    </form>
</body>
</html>

<script type="text/javascript">
    //On UpdatePanel Refresh
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                $('[id$=StudentGrid]').prepend($("<thead></thead>").append($('[id$=StudentGrid]').find("tr:first"))).DataTable({
                    "responsive": true,
                    "sPaginationType": "full_numbers"
                });
            }
        });
    };
</script>
```

----------


## jmcilhinney

Not surprisingly, QUOTE tags are for quotes and CODE tags are for code. Please edit your post and use the correct tag. One of the main reasons is that CODE tags maintain indenting, which is critical to reading code, especially long snippets.

----------


## techgnome

Also... one thread per issue please ... I'm notifying the mods about the other one since this one has more indfo...


-tg

----------

