DataTable 列过滤不提取值

Question

我在现代 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，在你的情况下，它是成功的功能。

你可以查看我之前测试过的线程here。