-
Aug 31st, 2022, 02:13 AM
#1
Thread Starter
Member
Headers gets distorted on searching datatables
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> </td>
<td> </td>
<td> </td>
<td>
</td>
<td rowspan="2"> </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">
</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.
-
Aug 31st, 2022, 02:18 AM
#2
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.
-
Aug 31st, 2022, 08:38 AM
#3
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|