jQuery not working in ASP.Net master page

When I use jQuery DataTable in a normal ASP.Net page it works fine. However when I use the same same code in a master page it gives me an error:

Uncaught TypeError: $(...).prepend(...).dataTableExt is not a function

I am writing both codes with works or not:

Working Code:

.aspx page code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryDataTables.aspx.cs" Inherits="Portal.WebApp.Login.JqueryDataTables" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <link href="css/dataTables.jqueryui.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript">
        $(function () {
            debugger;
            $("#DataGridView").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
            $('#DataGridView').dataTable();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="DataGridView" Font-Names="Calibri" Font-Size="11pt" AutoGenerateColumns="false" OnPreRender="DataGridView_PreRender" runat="server"></asp:GridView>
        </div>
    </form>
</body>
</html>

.cs page code

using System;
using System.Data;
using System.Web.UI.WebControls;
namespace Citizen.WebApp.Login
{
    public partial class JqueryDataTables : System.Web.UI.Page
    {
        RegistrationBLL m_RegistrationBLL = new RegistrationBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = null;
            dt = m_RegistrationBLL.GetList();
            DataGridView.DataSource = dt;
            int i;

            for (i = 0; i < dt.Columns.Count; i++)
            {
                BoundField test = new BoundField();
                test.DataField = dt.Columns[i].ToString();
                test.HeaderText = dt.Columns[i].ToString();
                DataGridView.Columns.Add(test);
                test = null;
            }
            DataGridView.DataBind();
        }

        protected void DataGridView_PreRender(object sender, EventArgs e)
        {
            if (DataGridView.Rows.Count > 0)
            {

                DataGridView.UseAccessibleHeader = true;


                DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader;


                DataGridView.FooterRow.TableSection = TableRowSection.TableFooter;
            }
        }

    }
}

Not Working Code:

.aspx Page Code

<%@ Page Title="" Language="C#" MasterPageFile="~/portal/master/Home.Master" AutoEventWireup="true" CodeBehind="MasterDataTable.aspx.cs" Inherits="Portal.WebApp.Login.MasterDataTable" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/dataTables.jqueryui.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript" lang="javascript">
        $(function () {
            debugger;
            $("#DataGridView").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTableExt();
            $('#DataGridView').dataTableExt();
        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cphbody" runat="Server">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <title></title>
    </head>
    <body>
        <div>
            <asp:GridView ID="DataGridView" Font-Names="Calibri" Font-Size="11pt" AutoGenerateColumns="false" OnPreRender="DataGridView_PreRender" runat="server"></asp:GridView>
        </div>
    </body>
    </html>
</asp:Content>

.cs page Code

using System;
using System.Data;
using System.Web.UI.WebControls;
namespace Citizen.WebApp.Login
{
    public partial class MasterDataTable : System.Web.UI.Page
    {
        RegistrationBLL m_RegistrationBLL = new RegistrationBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = null;
            dt = m_RegistrationBLL.GetList();
            DataGridView.DataSource = dt;
            int i;

            for (i = 0; i < dt.Columns.Count; i++)
            {
                BoundField test = new BoundField();
                test.DataField = dt.Columns[i].ToString();
                test.HeaderText = dt.Columns[i].ToString();
                DataGridView.Columns.Add(test);
                test = null;
            }
            DataGridView.DataBind();
        }

        protected void DataGridView_PreRender(object sender, EventArgs e)
        {
            if (DataGridView.Rows.Count > 0)
            {

                DataGridView.UseAccessibleHeader = true;


                DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader;


                DataGridView.FooterRow.TableSection = TableRowSection.TableFooter;
            }
        }
    }
}

Solution

call something like this

$(function () {
    $("table[id$='DataGridView']").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});

Also make sure that all referenced js files are present. Meaning that you are not getting 404 error in console.

Secondly, I would suggest to keep column rendering information in aspx markup instead of keeping it in code. Like below:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
        <asp:BoundField DataField="" HeaderText="Name" ItemStyle-Width="120" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>

Don't use prerender event, all this things can be done by markup. So make use of it as much as possible. In code just bind dataset to grid view and call databind event.

GridView1.DataSource = ds; // here assume ds is a dataset
GridView1.DataBind();