添加Individual Column Search后DataTables在Apps Script中加载失败

问题根源 #

1. 重复初始化DataTables：页面加载时，Index.html中的$(document).ready先对空表格初始化了DataTables但未传入数据；之后google.script.run获取数据成功后，showData函数又再次对同一个表格调用DataTable()初始化，导致组件冲突，无法正常渲染表格数据，仅保留了第一次初始化生成的页脚搜索框。
2. 列搜索逻辑与数据加载逻辑分离：搜索控件的创建和事件绑定没有和数据加载流程结合，导致初始化顺序混乱。

修复方案 #

合并表格初始化逻辑，将搜索控件创建、数据加载、列搜索事件绑定整合到同一个流程中，删除重复的初始化代码。

修改后的Index.html

<!DOCTYPE html>
<html>
  
  <head>
    <base target="_top">
    
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>   
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>  
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>   
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">   

    <?!= include('JavaScript'); ?> 
  </head>

  <body>
    <div class="container">
      <br>
      <div class="row">
        <div class="col-20">
          <p class="h4 mb-4 text-center p-3">Search Database</p>
          <style>
            tfoot input {
              width: 100%;
              padding: 3px;
              box-sizing: border-box;
            }
          </style>
          <table id="data-table" class="table table-striped table-sm table-hover table-bordered">  
           <tfoot>
            <tr>
                <th>File Name</th>
                <th>Description</th>
                <th>File Type</th>
                <th>Category</th>
                <th>Topic</th>
                <th>File Extension</th>
                <th>File Link</th>
                <th>Uploaded By</th>
                <th>Uploaded Date</th>
            </tr>
          </tfoot>
          </table>
        </div>
      </div>
    </div> 
  </body>
</html>

修改后的JavaScript.html

<script>
google.script.run.withSuccessHandler(showData).getData();

function showData(dataArray) {
  // 创建页脚搜索输入框
  $('#data-table tfoot th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search '+title+'" />');
  });

  // 整合数据加载与列搜索逻辑的表格初始化
  var table = $('#data-table').DataTable({
    data: dataArray,
    columns: [
      { "title": "File Name" },
      { "title": "Description" },
      { "title": "File Type" },
      { "title": "Category" },
      { "title": "Topic"},
      { "title": "File Extension" },
      { 
        "title": "File Link",
        "render": function(data, type, row, meta){
          if(type === 'display'){
            data = '<a href="' + data + '">' + 'Link Here' + '</a>';
          }
          return data;
        }
      },
      { "title": "Uploaded By" },
      { "title": "Upload Date" },
    ],
    initComplete: function() {
      // 绑定列搜索事件
      this.api().columns().every(function() {
        var that = this;
        $('input', this.footer()).on('keyup change clear', function() {
          if (that.search() !== this.value) {
            that
              .search(this.value)
              .draw();
          }
        });
      });
    }
  });
}
</script>

修改关键点 #

• 删除Index.html中重复的DataTables初始化代码，避免组件冲突。
• 将页脚搜索框的创建逻辑移到showData函数中，确保在数据加载前准备好搜索控件。
• 把列搜索的initComplete回调整合到带数据的表格初始化配置中，确保表格渲染完成后绑定搜索事件。
• 移除showData中多余的$(document).ready包裹，因为showData是在数据获取成功后执行，此时DOM已加载完成。

内容的提问来源于stack exchange，提问作者Jack