数据表：添加单独列搜索后表无法加载

问题描述 投票：0回答：1

我正在使用 DataTables 在 Apps 脚本上显示工作表列，它工作得很好（下图）

然后我添加代码将单独列搜索放在表格底部（页脚），但现在表格加载失败，只显示每列的单独搜索框（下图）

我使用以下代码：

代码.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}


function getData(){
  var spreadSheetId = "1bmRTaGdSRal7atMYaBmG90H1J__wV6vytXoAhxmmjuM"; 
  var dataRange     = "Sheet1!A2:I";

  var range   = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values  = range.values;
  
  return values;
}


function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

索引.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> 

  <script type="text/javascript">

    $(document).ready(function () {
      $('#data-table tfoot th').each( function() {
      var title = $(this).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" />');
      });

      var table = $('#data-table').DataTable({       
          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>

  </body>
</html>

JavaScript.html

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

function showData(dataArray) {
  $(document).ready(function () {
    $('#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" },
      ]
    });

  });
}

</script>

我一直在尝试解决这个问题，但到目前为止还没有任何效果。这里似乎有什么问题？

javascript google-apps-script datatables
1个回答
0
投票

在您的脚本中，将 

initComplete
的属性添加到函数 
showData
怎么样？当这反映在你的脚本中时，它会变成如下所示。

在此修改中，您的 Google Apps 脚本不会被修改。

HTML：
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：
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 + '" />');
  });
  $('#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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.