DataTable 列過濾不提取值

Question

我在 Modern SharePoint 工作，並安裝了一個 Web 部件，允許我將代碼直接注入頁面。 我已構建此代碼以允許我使用 DataTable 從該站點上的列表中提取信息。

我在使用列的過濾器時遇到問題，因為它們似乎根本沒有提取任何值。 我相信這是因為我在創建 DataTable 之后調用了表的數據。 但我也在代碼中引用了表，以獲取表聲明后的數據。 有人可以看看我的代碼，看看是否有辦法做到這一點？

任何幫助，將不勝感激！

<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

這應該與DataTable init之后的databind有關，嘗試用數據更新init，在你的情況下，它是成功的function。

你可以在這里查看我之前測試過的線程。