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

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

arunavachowdhury1981arunavachowdhury1981 Posts: 2Questions: 1Answers: 0

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.

Answers

  • arunavachowdhury1981arunavachowdhury1981 Posts: 2Questions: 1Answers: 0
    edited February 2022

    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>
    
  • tangerinetangerine Posts: 3,244Questions: 30Answers: 385
    $('#grdPrUpPrj').DataTable()({
    

    That is incorrect. The correct syntax is

    $('#grdPrUpPrj').DataTable( {
    
  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    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

Sign In or Register to comment.