DataTable Column Filtering Not Pulling in Values

schmitm3

Hello,

I am working in Modern SharePoint and have a web-part installed that allows me to inject code directly into the page. I have built this code to allow me to use a DataTable to pull information from a List I have on that site.

I am having trouble with the filters for the columns as they appear to not be pulling in any values at all. I believe this is due to me calling the data for the table after the DataTable has been created. But I also reference the table in the code to get the data for the table after it is declared. Can someone please take a look at my code and see if there is a way for this to be done? I have also attached an image of the issue.

Any help would be appreciated!

<table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Industry</th>
                        <th>Market</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Industry</th>
                        <th>Market</th>
                        <th>Description</th>
                    </tr>
            </tfoot>
            </table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script>

var dataTable;

$(document).ready(function() {
        dataTable=$('#example').DataTable({
            initComplete: function () {
                this.api().columns([2,3]).every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.header()).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>' )
                    } );
                } );
            }
        
         } );
        
        
        
    $.ajax({
        url: "https://ewscripps.sharepoint.com/sites/lighthouseideas/_api/web/lists/getbytitle('Site%20Pages')/items?$select=FileLeafRef,Title,Industry,Market,Description,PageType&$filter=TaxCatchAll/Term eq 'Station Initiatives'",
        headers: { 'accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose', 'X-RequestDigest': jQuery('#__REQUESTDIGEST').val()},
        success: function (data) {
            console.log("issued URL Request")
            //Get Success Stories
            for (var i=0; i<data.d.results.length; i++)
            {
                console.log("Found: " + data.d.results[i].Title )
                dataTable.row.add( [
                    "<img src='https://ewscripps.sharepoint.com/sites/lighthouseideas/_layouts/15/getpreview.ashx?path=SitePages/" + data.d.results[i].FileLeafRef + "'>",
                    data.d.results[i].Title,
                    data.d.results[i].Industry.results,
                    data.d.results[i].Market.results,
                    data.d.results[i].Description
                ] ).draw( false );
            }
            console.log(data.d.results[4]);
            console.log(data.d.results[9]);
            dataTable.draw(true)
        }

     }); 
        
} );
</script>

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin