Uncaught TypeError: Cannot read property 'mData' of undefined for JQuery DataTable
<p>I have bound my datatable to my gridview in ASP.Net. I Have tried to use jQuery dataTable to show search and sorting options in my gridview, but the datatable throws me an error. </p>

<p>The Error is:
Uncaught TypeError: Cannot read property 'mData' of undefined" this is the error.</p>

<p>I have used the below code:</p>

<pre><code>function pageLoad(sender, args) {
    $('#grdProducts').DataTable(
        $(document).ready(function () {
            $('.dataTable').dataTable();
        })
    );
}
</code></pre>

<pre class="lang-xml prettyprint-override"><code>&lt;asp:GridView ID="grdProducts" runat="server" AutoGenerateColumns="false" CssClass="table table-hover dataTable"&gt;
    &lt;Columns&gt;
         &lt;asp:TemplateField Visible="false"&gt;
            &lt;ItemTemplate&gt;
                &lt;asp:Label ID="lblProductID" runat="server"                        Text='&lt;%# Eval("ProductID")%&gt;' /&gt;
            &lt;/ItemTemplate&gt;
        &lt;/asp:TemplateField&gt;
        &lt;%--&lt;asp:BoundField DataField="GroupName" HeaderText="Group Name" /&gt;--%&gt;
        &lt;asp:BoundField DataField="BrandID" HeaderText="Brand" /&gt;
        &lt;asp:BoundField DataField="ProductName" HeaderText="Product" /&gt;
        &lt;asp:BoundField DataField="ShortCode" HeaderText="Code " /&gt;
        &lt;asp:BoundField DataField="Price" HeaderText="Price" /&gt;
        &lt;asp:TemplateField HeaderText="Update"&gt;
            &lt;ItemTemplate&gt;
                &lt;asp:Button ID="btnUpdate" runat="server" Text="Update" class="btn btn-info" OnClick="btnUpdate_OnClick" /&gt;
            &lt;/ItemTemplate&gt;
        &lt;/asp:TemplateField&gt;
    &lt;/Columns&gt;
&lt;/asp:GridView&gt;
</code></pre>