jQuery数据表在谷歌Web应用程序中“没有数据在表中可用”

2022-01-30 15:10:37 标签 htmljquerygoogle-apps-scriptdatatables

我运行“03_datatables。html”与谷歌Web应用程序。页面加载后,它开始数据提取过程。在提取数据后,它将相关行添加到“tbody”元素。但我不能过滤我的数据,因为它给出了“没有数据可用的表”错误。我该如何解决这个问题?

错误:https://i。imgur。com/aahPTkH。png

Code。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>

###我的问题解决了,当我把代码内的“$(文档)。ready"函数在"generateTable"函数的末尾。非常感谢。

爱德华吗?T 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>
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码