DataTable Column Filtering Not Pulling in Values

Question

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?

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>

Answer 1

This should be related to databind after DataTable init, try to update the init with data, in your case, it's success function.

You could check my previous tested thread here .