On page load i get this error in a dialogue box (DataTables warning: Non-table node initialisation (INPUT). For more information about this error, please see http://datatables.net/tn/2)
because i added a check box to a grid view
how do i fix it ?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JobsV.aspx.cs" Inherits="JobsV" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
<title>VIEW /EDIT JOB</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(function () {
$("#TextBox15").datepicker(
{
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
$("#TextBox16").datepicker(
{
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
$("#TextBox19").datepicker(
{
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
$("#TextBox20").datepicker(
{
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.txtUserName').width(45);
$('.txtUserName').focus(function () {
$(this).animate({
width: 250,
height: 20
})
.delay(100)
});
$('.txtUserName').blur(function () {
$(this).animate({
width: 45,
height: 20
})
.delay(100)
});
});
</script>
<style type="text/css">
.style6 {
width: 1079px;
height: 24px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.style15 {
width: 407px;
}
.style20 {
width: 750px;
}
.style23 {
width: 145px;
}
.Initial {
}
</style>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
#customers0 {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
</style>
<style>
table.roundedCorners {
border: 1px solid DarkOrange;
border-radius: 13px;
border-spacing: 0;
}
table.roundedCorners td,
table.roundedCorners th {
border-bottom: 1px solid DarkOrange;
padding: 4px;
}
table.roundedCorners tr:last-child > td {
border-bottom: none;
}
.style140 {
height: 3px;
width: 267px;
}
</style>
</head>
<table style="width: 100%; height: 10px;" bgcolor="DarkOrange" frame="void">
<tr>
<td class="style6"> </td>
</tr>
</table>
<body>
<form id="form1" runat="server">
<div>
</div>
<table style="width: 100%;">
<tr>
<td class="style23"> </td>
<td class="style15">
<table align="center" border="1px" bordercolor="grey" style="width: 1050px">
<tr>
<td align="center" class="style20" style="font-size: large; color: #006699; font-family: Cambria; font-weight: bold;">
<table style="width: 100%; height: 164px; color: #000080; background-color: #000099;">
<tr>
<td style="background-color: #FFFFFF" class="style140" align="center">
<table style="width: 100%;">
<tr>
<td>
<strong>VIEW /EDIT JOB</strong></td>
<td> </td>
<td align="right"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="style5" align="left" style="background-color: #FFFFFF">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"
CellPadding="4" Font-Names="Century Gothic" Font-Size="XX-Small"
Width="100%" Style="margin-bottom: 0px">
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="cbSelect"
CssClass="gridCB" runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="id" HeaderText="id" />
<asp:BoundField DataField="pid" HeaderText="pid" />
<asp:BoundField DataField="variant" HeaderText="variant" />
<asp:BoundField DataField="country" HeaderText="country" />
<asp:BoundField DataField="pack" HeaderText="pack" />
<asp:BoundField DataField="customer" HeaderText="customer" />
<asp:BoundField DataField="jobnumber" HeaderText="jobnumber" />
<asp:BoundField DataField="artworkdate" HeaderText="artworkdate" />
<asp:BoundField DataField="reprodate" HeaderText="reprodate" />
<asp:BoundField DataField="artworknumber" HeaderText="artworknumber" />
<asp:BoundField DataField="templateno" HeaderText="templateno" />
<asp:HyperLinkField DataNavigateUrlFields="Id"
DataNavigateUrlFormatString="CustomerDetails.aspx?Id={0}"
Text="View" />
<asp:HyperLinkField DataNavigateUrlFields="Id"
DataNavigateUrlFormatString="CustomerDetails.aspx?Id={0}"
Text="Edit" />
</Columns>
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
<RowStyle BackColor="White" ForeColor="#003399" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SortedAscendingCellStyle BackColor="#EDF6F6" />
<SortedAscendingHeaderStyle BackColor="#0D4AC4" />
<SortedDescendingCellStyle BackColor="#D6DFDF" />
<SortedDescendingHeaderStyle BackColor="#002876" />
</asp:GridView>
<asp:Label ID="Label007" runat="server"></asp:Label>
<br />
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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" />
<script type="text/javascript">
$(function () {
$("[id*=GridView1]").DataTable({
bLengthChange: true,
lengthMenu: [[10, 30, -1], [10, 30, "All"]],
bFilter: true,
bSort: true,
bPaginate: true
});
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class JobsV : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(" SELECT id, pid, variant, country, pack, customer, jobnumber, artworkdate, reprodate, artworknumber, templateno FROM job ORDER BY id DESC", con))
{
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
//Required for jQuery DataTables to work.
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
