Google Web App中的jQuery DataTables“表中没有可用数据”
Posted
技术标签:
【中文标题】Google Web App中的jQuery DataTables“表中没有可用数据”【英文标题】：jQuery DataTables "No Data Available in Table" in Google Web App 【发布时间】：2021-11-13 12:49:02 【问题描述】：我正在使用 Google Web 应用程序运行“03_datatables.html”。页面加载后，它开始数据提取过程。它在提取数据后将相关行添加到“tbody”元素。但我无法过滤我的数据，因为它给出了“表中没有可用数据”错误。我该如何解决这个问题？
错误：https://i.imgur.com/aahPTkH.png
代码.gs
function doGet(e)
return HtmlService.createTemplateFromFile('03_datatables').evaluate();
function getTableData()
var ss= SpreadsheetApp.getActiveSpreadsheet();
var vs = ss.getSheetByName('Data');
var data = vs.getRange(2, 1,vs.getLastRow()-1, 6).getValues();
return data;
03_datatables.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.2/af-2.3.7/cr-1.5.4/date-1.1.1/fc-3.3.3/fh-3.1.9/kt-2.6.4/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.5/sb-1.2.1/sp-1.4.0/sl-1.3.3/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/dataTables.uikit.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css"/>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.2/af-2.3.7/cr-1.5.4/date-1.1.1/fc-3.3.3/fh-3.1.9/kt-2.6.4/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.5/sb-1.2.1/sp-1.4.0/sl-1.3.3/datatables.min.js"></script>
<script>
$(document).ready(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+'" />' );
);
// 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();
);
);
);
);
document.addEventListener('DOMContentLoaded', function()
google.script.run.withSuccessHandler(generateTable).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);
);
</script>
</body>
</html>
【问题讨论】：
如果您要使用tbody.appendChild(row); 构建HTML 表，那么您需要在初始化DataTable 之前 执行此操作。请参阅HTML (DOM) sourced data 示例，其中 HTML 表在“文档就绪”事件触发之前已经创建。
更常见的方法是将表数据直接传递给DataTables，作为JSON。有多种方法可以做到这一点 - 请参阅Ajax and JavaScript examples。
当我将代码放在“generateTable”函数末尾的“$(document).ready”函数中时，我的问题就解决了。非常感谢。
欢迎answer your own question，其他人可以看到实际解决方案的代码。
【参考方案1】：
当我将代码放在“generateTable”函数末尾的“$(document).ready”函数中时，我的问题就解决了。非常感谢。
编辑 HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.2/af-2.3.7/cr-1.5.4/date-1.1.1/fc-3.3.3/fh-3.1.9/kt-2.6.4/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.5/sb-1.2.1/sp-1.4.0/sl-1.3.3/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/dataTables.uikit.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css"/>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.2/af-2.3.7/cr-1.5.4/date-1.1.1/fc-3.3.3/fh-3.1.9/kt-2.6.4/r-2.2.9/rg-1.1.3/rr-1.2.8/sc-2.0.5/sb-1.2.1/sp-1.4.0/sl-1.3.3/datatables.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function()
google.script.run.withSuccessHandler(generateTable).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);
);
// 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>
</body>
</html>
【讨论】：
以上是关于Google Web App中的jQuery DataTables“表中没有可用数据”的主要内容，如果未能解决你的问题，请参考以下文章
将cURL与PHP文件中的Google Apps Script Web App一起使用时遇到问题
容器'Web App Libraries'引用非现有库'C： work WebRoot WEB-INF lib google-collections-1.0-(示例代码
Google App Script Deploy as Web App 卡在 Fetching Data
Google App Script Web App GET 和 POST 请求被 CORS 策略阻止
Google Web Toolkit (GWT) rpc 到 Google App Engine (GAE) 上的 Python 服务器