Results 1 to 3 of 3

Thread: Headers gets distorted on searching datatables

  1. #1

    Thread Starter
    Member
    Join Date
    Sep 2020
    Location
    Kampala
    Posts
    39

    Headers gets distorted on searching datatables

    Name:  Screenshot 2022-08-31 at 10-01-52 Screenshot.jpg
Views: 409
Size:  23.2 KB


    Code:
    <%@ 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>
    Last edited by Makumbi; Aug 31st, 2022 at 03:00 AM.

  2. #2
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,274

    Re: Headers gets distorted on searching datatables

    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.

  3. #3
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,522

    Re: Headers gets distorted on searching datatables

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


    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width