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>

Lee_MSFT Lee_MSFT · Accepted Answer · 2020-07-03T00:49:02

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.

DataTable Column Filtering Not Pulling in Values

1 Answers