Uncaught TypeError: $(...).DataTable(...) is not a function only when I add some properties

arunavachowdhury1981

This code works perfectly. The default view is loaded with controls and the datatable functionality works

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" defer="defer"></script>
<script src="assets/resource/tiny_mce.js"></script>

 <script type="text/javascript">
     $(document).ready(function () {
         debugger;
        $('#grdPrUpPrj').DataTable()

    });
 </script>

the moment I add some properties to the datatable like this..

$('#grdPrUpPrj').DataTable()({
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});

I get the exception

WebForm1.aspx:19 Uncaught TypeError: $(...).DataTable(...) is not a function
at HTMLDocument.<anonymous> (WebForm1.aspx:19:41)
at j (jquery-1.11.3.min.js:2:27309)
at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2:28122)
at Function.ready (jquery-1.11.3.min.js:2:29956)
at HTMLDocument.J (jquery-1.11.3.min.js:2:30322)

I'm trying to find a solution of it for last 10 hours but still without a clue what is getting wrong.

One point, I have used the below code since thead was missing while binding data to asp gridview

protected void grdPrUpPrj_PreRender(object sender, EventArgs e)
{
grdPrUpPrj.UseAccessibleHeader = true;
grdPrUpPrj.HeaderRow.TableSection = TableRowSection.TableHeader;
}

I am not sure if it has any impact.
The web page is standalone and no master page is involved to load multiple versions of Jquery or datatable references.

Please help.

arunavachowdhury1981

Tried with this as well

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" "></script>


 <script type="text/javascript">
     $(document).ready(function () {
         debugger;
        $('#grdPrUpPrj').DataTable()({
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });

    });
 </script>

tangerine

$('#grdPrUpPrj').DataTable()({

That is incorrect. The correct syntax is

$('#grdPrUpPrj').DataTable( {

allan

If that isn't the issue, please link to a case case showing the issue.

My guess is that you have loaded jQuery twice on the page.

Allan