I am tring to use datatables but the are not working the page loads but the search facility does not appear.
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="Subcodes.aspx.vb" Inherits="SLISWEB2023.Subcodes1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">0
<script type="text/javascript">
function Showalert() {
alert('Call JavaScript function from codebehind');
}
</script>
<script type = "text/javascript">
function askConfirm(msg)
{
alert(msg)
}
</script>
<div>
<table class="auto-style1">
<tr>
<td class="auto-style72">
<asp:Button ID="Button2" runat="server" Text="Back To Menu" />
</td>
<td class="auto-style72"> </td>
<td class="auto-style72"> </td>
<td class="auto-style72"> </td>
</tr>
<tr>
<td colspan="4" class="auto-style73">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="StockbooksGrid" runat="server" AutoGenerateColumns="False" Width="1307px" ShowFooter="True" CssClass="auto-style72">
<Columns>
<asp:ButtonField CommandName="Editbook" Text="Edit " />
<asp:TemplateField HeaderText="CallNo">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("bookcode") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Callno" runat="server" Text='<%# Bind("bookcode") %>' Width="73px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Callno" runat="server" Text='<%# Bind("bookcode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Book Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("bookname") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Fbookname" runat="server" Text='<%# Bind("bookcode") %>' Width="349px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="BookName" runat="server" Text='<%# Bind("bookname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Author">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("author") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Fauthor" runat="server" Text='<%# Bind("bookcode") %>' Width="210px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Author" runat="server" Text='<%# Bind("author") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Subject">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("category") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" Height="27px" Width="243px" DataSourceID="bksubjects" DataTextField="subject" DataValueField="subject" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<asp:SqlDataSource ID="bksubjects" runat="server" ConnectionString="<%$ ConnectionStrings:SLISConnectionString %>" SelectCommand="SELECT [subject] FROM [subjects]"></asp:SqlDataSource>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Subject" runat="server" Text='<%# Bind("category") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EntryCode">
<EditItemTemplate>
<asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("autofield") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="Button1" runat="server" Text="Add New" OnClick="Button1_Click" />
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Entrycode" runat="server" Text='<%# Bind("autofield") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Publisher">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Publisher") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Publisher" runat="server" Text='<%# Bind("Publisher") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Year Published" Visible="False">
<EditItemTemplate>
<asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Yearpublished") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="YearPublished" runat="server" Text='<%# Bind("Yearpublished") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ISBN" Visible="False">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("ISBN") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="ISBN" runat="server" Text='<%# Bind("ISBN") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edition">
<EditItemTemplate>
<asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("Editions") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Editions" runat="server" Text='<%# Bind("Editions") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="4" class="auto-style72">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table class="auto-style3">
<tr>
<td class="auto-style23">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" AutoPostBack="True">
<asp:ListItem>None</asp:ListItem>
<asp:ListItem>Import Books From Excel</asp:ListItem>
<asp:ListItem>Batch Transfer Accession numbers</asp:ListItem>
<asp:ListItem>Transfer Selected Accession numbers</asp:ListItem>
<asp:ListItem Value="Delete Single Accesssion No">Delete Single Accesssion No</asp:ListItem>
<asp:ListItem>Transfer Single Accession numbers</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Currentusertxt" runat="server" Text="Current Username"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnYes" />
<asp:PostBackTrigger ControlID="btnNo" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td class="auto-style72">
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground"
CancelControlID="btnCancel">
</cc1:ModalPopupExtender>
</td>
<td class="auto-style72"> </td>
<td class="auto-style72"> </td>
<td class="auto-style72"> </td>
</tr>
</table>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
<asp:Button ID="btnCancel" runat="server" Text="X" Style="float: right;" />
</div>
<div class="body">
<asp:Label ID="lblMessage" runat="server" Text="" />
<br />
</div>
<div class="footer" style="text-align: center;">
<asp:Button ID="btnYes" runat="server" Text="Yes" OnClick="OnYes" />
<asp:Button ID="btnNo" runat="server" Text="No" OnClick="OnNo" />
</div>
</asp:Panel>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet"
type="text/css" />
<!-- InputMask -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.date.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.extensions.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/css/inputmask.css" />
<script type="text/javascript">
$(function () {
$('#StockbooksGrid tfoot tr').appendTo('#StockbooksGrid thead');
$('#StockbooksGrid').removeAttr('width').DataTable({
bLengthChange: true,
lengthMenu: [[10, 15, -1], [10, 15, "All"]],
bFilter: true,
bSort: true,
scrollCollapse: true,
paging: true,
fixedColumns: false,
orderCellsTop: true
});
});
</script>
<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$=StockbooksGrid]').prepend($("<thead></thead>").append($('[id$=StockbooksGrid]').find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
}
});
};
</script>
</asp:Content>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
BindGrid2000()
End If
End Sub
Private Sub BindGrid2000()
Dim constr As String = ConfigurationManager.ConnectionStrings("SLISConnectionString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT autofield2,autofield,bookcode, bookname, author,category,publisher,yearpublished,isbn,class as Editions FROM stockkabojja ORDER BY autofield ASC", con)
Using sda As New SqlDataAdapter(cmd)
cmd.CommandType = CommandType.Text
Dim dt As New DataTable()
sda.Fill(dt)
StockbooksGrid.DataSource = dt
StockbooksGrid.DataBind()
StockbooksGrid.UseAccessibleHeader = True
StockbooksGrid.HeaderRow.TableSection = TableRowSection.TableHeader
End Using
End Using
End Using
End Sub
