$(selector).DataTable(); giving error: undefined is not a function in SharePoint 2013

amandanicole

Hello,

I'm trying to implement DataTables on a SharePoint 2013 page, and wanted to first test it with the HTML from your zero configuration example. The console has repeatedly given the error: "undefined is not a function" referencing $(selector).DataTable();.
I've looked through what other people have had to say about this error, and it is not because I am referencing jquery after the datatables.js file. I have gotten the error both when putting the scripts in a script editor web part and when putting it in the page head using SP Designer.

The HTML is the from the zero configuration example.

This is what it looks like when added directly in SP Designer 2013:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <meta name="CollaborationServer" content="SharePoint Team Web Site" />
    <SharePoint:ScriptBlock runat="server">
    var navBarHelpOverrideKey = "WSSEndUser";
    </SharePoint:ScriptBlock>
    <SharePoint:RssLink runat="server"/>
    <style type="text/css">
        #pageStatusBar{
            display:none!important;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="http://sharepoint/people/SiteAssets/jquery-dataTables.css">

    <script type="text/javascript" charset="utf8" src="http://sharepoint/SiteAssets/jquery-1.9.1.js"></script>

    <script type="text/javascript" charset="utf8" src="http://sharepoint/people/SiteAssets/jquery-dataTables.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
                var oTable = $('#example').DataTable();
        });
    </script>
    </asp:Content>

Uncaught TypeError: undefined is not a function shows up in the console. Am I missing something really obvious here?
Thanks for any help!

tangerine

I'm not an asp or Sharepoint user so this may be useless - but....

This example:

http://spphile.wordpress.com/2014/04/23/showing-search-results-in-a-grid-using-datatables-js/

looks way more complex than what you've posted. Have you asked on a Sharepoint site?

allan

Given that the $(document).ready() call appears to be working, but $().DataTable() is not, I would suggest that the most likely issue is that another version of jQuery is being loaded on the page after the code above - but before the document is 'ready'.

jQuery will overwrite itself if loaded multiple times, so the result would be that you loose the reference to DataTables.

The best fix (assuming I am correct) is to load jQuery just once.

I could confirm if this was the issue, but would need a link to the page.

Allan

amandanicole

@allan,

That was exactly the problem. We were loading multiple instances of jQuery, and found that the only way to get it to work was putting the reference to the datatables.js file after the jQuery references on our Master Page.

Thanks for your help!