Hi

I am trying to implement column filtering as per the example here https://datatables.net/examples/api/multi_filter_select.html but I am getting the error: this.api is not a function at object.<anonymous>

My code is:

<!-- jQuery -->
<script type="text/javascript" charset="utf8" 
src="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery-2.2.0.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/moment.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/datetime-moment.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
href="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/dataTables.bootstrap.min.css ">
<link rel="stylesheet" type="text/css"
href="https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Scripts/bootstrap.min.css ">



<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Existing Description</th><th>New Description</th><th>Abbreviation</th><th>Business Definition</th><th>Group</th><th>System/Report</th><th>Last Updated</th></thead>
<tfoot></tfoot>
</table>


<script type="text/javascript">


$(document).ready(LoadDDItems())



function LoadDDItems()

{
        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Business Glossary')/items?"+
"$select=Title,Abbreviation,Business_x0020_Definition,Advanced_x0020_Definition,RoutingRuleDescription,Object_x0020_Sub_x002d_Type,System_x002f_Report,Modified,ID&$top=5000&$filter=Current_x0020_Status eq 'Active'",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }
       
        });
        
        
        
        call.done(function (data,textStatus, jqXHR){
        
            $('#example').dataTable({
                "autoWidth": true,
                "bDestroy": true,
                "bProcessing": true,
                 "pageLength": 50,
                 <!-- "scrollY": '60vh', -->
                 "caseInsensitive": false,
                 "oLanguage": {"sSearch": "Search by text:"},
                  "order": [0, "asc"], 
                  "dom":' <"search"f><"top"i>rt<"bottom"ip><"clear">',
                "aaData": data.d.results,
                "aoColumns": [
                <!--    { "mData": "ID" },  -->
                    { "mData": "Title", "width": "12%", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {$(nTd).html("<a href='https://abc.sharepoint.com/teams/IT/BI/BusinessGlossary/Lists/Business%20Glossary%20New/DispFormCustom.aspx?ID="+oData.ID+"'>"+oData.Title+"</a>");}},
                    { "mData": "RoutingRuleDescription", "width": "12%" },
                    { "mData": "Abbreviation", "width": "8%" },
                    { "stype": "html", "mData": "Business_x0020_Definition", "width": "60%" },
                    { "mData": "Object_x0020_Sub_x002d_Type", "width": "8%" },
                    { "mData": "System_x002f_Report", "width": "8%" },
                <!--  { "stype": "html", "mData": "Advanced_x0020_Definition", "width": "60%" }, -->
                    <!-- { "stype": "html", "mData": "Image0" }, -->
                    <!-- { "mData": "Image", "render": function (data) {return '<img src="' +data+ '" />';}}, -->
                    <!-- { "mData": "Group1", "width": "20px" }, -->
                    { "stype": "date", "mData": "Modified", "width": "20px", "render": function( data, type, row, meta){
                            var ThisDate = moment(new Date(data)).format("Do MMM YYYY");
                            return ThisDate                 
                }}]
              });
              
        


 this.api().columns().every( function () {

                var column = this;

                var select = $('<select><option value=""></option></select>')

                    .appendTo( $(column.footer()).empty() )

                    .on( 'change', function () {

                        var val = $.fn.dataTable.util.escapeRegex(

                            $(this).val()

                        );

 

                        column

                            .search( val ? '^'+val+'$' : '', true, false )

                            .draw();

                    } );

 

                column.data().unique().sort().each( function ( d, j ) {

                    select.append( '<option value="'+d+'">'+d+'</option>' )

                } );

            } );

        









} );

}

</script>

Really stuck on this so any help really appreciated. Pretty sure its something simple just cant see it :-/

(BTW: This is using SP online so cant post via debugger)

Cheers