Google Web应用中jQuery DataTables显示“No Data Available in Table”且无法过滤数据的解决方法

这个问题的核心原因是DataTables初始化的时机不对：你在DOM加载完成后就立刻初始化了DataTables，但此时表格tbody里还没有任何数据；之后通过google.script.run异步拉取数据并手动插入DOM的操作，DataTables完全没有感知到，所以它依然认为表格是空的，导致过滤功能失效并显示"No Data Available"。

下面提供两种可靠的解决方法：

方法一：先加载数据，再初始化DataTables #

调整代码执行顺序，先完成数据的拉取和DOM渲染，再初始化DataTables，这样DataTables初始化时就能检测到所有行数据。

修改后的03_datatables.html脚本部分：

<script>
// 先拉取数据，再初始化DataTables
document.addEventListener('DOMContentLoaded', function() {
  google.script.run.withSuccessHandler(function(dataArray) {
    generateTable(dataArray);
    // 数据渲染完成后，初始化DataTables
    initDataTable();
  }).getTableData();
});

function generateTable(dataArray) {
  var tbody = document.getElementById("table-body");
  dataArray.forEach(function(r){
    var row = document.createElement("tr");
    for(i=0; i<6; i++) {
      var col = document.createElement("td");
      col.textContent = r[i];
      row.appendChild(col);
    }
    tbody.appendChild(row);
  });
}

function initDataTable() {
  // Setup - add a text input to each footer cell
  $('#example tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
  } );

  // DataTable初始化
  var table = $('#example').DataTable({
    initComplete: function () {
      // Apply the search
      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>

方法二：使用DataTables API添加数据（更推荐） #

跳过手动操作DOM的步骤，直接用DataTables的row.add() API来添加数据，这样DataTables会自动维护数据状态，原生支持过滤、排序等功能。

修改后的03_datatables.html脚本部分：

<script>
$(document).ready(function() {
  // 先初始化空的DataTables
  var table = $('#example').DataTable({
    initComplete: function () {
      // Setup - add a text input to each footer cell
      $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
      } );

      // Apply the search
      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();
          }
        } );
      } );
    }
  });

  // 拉取数据并通过DataTables API添加
  google.script.run.withSuccessHandler(function(dataArray) {
    dataArray.forEach(function(r){
      // 用row.add添加行数据，然后draw()更新表格
      table.row.add(r).draw(false);
    });
  }).getTableData();
});
</script>

为什么推荐方法二？ #

• DataTables会自动管理数据，不需要手动操作DOM，减少出错概率
• 原生支持所有DataTables的功能（过滤、排序、分页等），不需要额外处理
• 代码更简洁，逻辑更清晰

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