[Solved] jQuery DataTable Error: DataTables warning: Non-table node initialisation

DataTables warning: Non-table node initialisation (A). For more information about this error, please see http://datatables.net/tn/2

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="NewGrid.aspx.vb" Inherits="KABOJJACLASS.NewGrid" %>

      <form id="form1" runat="server">
      
    
          <div>

          <table class="nav-justified">
              <tr>
                  <td>Name</td>
                  <td>
                      <asp:TextBox ID="Names" runat="server"></asp:TextBox>
                  </td>
              </tr>
              <tr>
                  <td>Country</td>
                  <td>
                      <asp:TextBox ID="Countrys" runat="server"></asp:TextBox>
                  </td>
              </tr>
          </table>

      </div>
<div class="container">
    <div class="table-responsive">
            
        <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server"
            CssClass="table table-bordered table-hover table-striped thead-dark">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="ID" />
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkEdit" href="#" data-target="#MyPopup" 
                            data-toggle="modal" runat="server">Edit</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
</div>

<div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">Update Customer
                </h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover table-striped thead-dark">
                    <tr>
                        <td>Id</td>
                        <td><asp:TextBox runat="server" ID="txtId" ReadOnly="true" CssClass="form-control" /></td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td><asp:TextBox runat="server" ID="txtName" CssClass="form-control" /></td>
                    </tr>
                    <tr>
                        <td>Country</td>
                        <td><asp:TextBox runat="server" ID="txtCountry" CssClass="form-control" /></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnUpdate" Text="Update" runat="server" CssClass="btn btn-primary" OnClick="OnUpdate" />
                <input type="button" value="Close" class="btn btn-danger" data-dismiss="modal" />
            </div>
        </div>
    </div>
</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://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: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            bPaginate: true
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $("[id*=lnkEdit]").click(function () {
            $('#txtId').val($(this).closest('tr').find('td').eq(0).html());
            $('#txtName').val($(this).closest('tr').find('td').eq(1).html());
            $('#txtCountry').val($(this).closest('tr').find('td').eq(2).html());
        });
    });
</script>
  </form>

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Public Class NewGrid
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim dt As Data.DataTable = New Data.DataTable()
            dt.Columns.AddRange(New Data.DataColumn(2) {
                                New Data.DataColumn("Id"),
                                New Data.DataColumn("Name"),
                                New Data.DataColumn("Country")})
            dt.Rows.Add(1, "John Hammond", "United States")
            dt.Rows.Add(2, "Mudassar Khan", "India")
            dt.Rows.Add(3, "Suzanne Mathews", "France")
            dt.Rows.Add(4, "Robert Schidner", "Russia")
            GridView1.DataSource = dt
            GridView1.DataBind()
            GridView1.UseAccessibleHeader = True
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
        End If
    End Sub


    Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
        ' Code to update the record.
        Dim id As String = Request.Form("txtId")
        Dim name As String = Request.Form("txtName")
        Dim country As String = Request.Form("txtCountry")
        Names.Text = name
        Countrys.Text = country

    End Sub

End Class