javascript - 我有来自 google sheet in Java script bit 的数据如何创建搜索功能并确保 50000 加载行

Question

我正在寻找能够从 html 谷歌表中搜索表格的脚本女巫。如果有很多数据，它必须加载数据或拆分它们。

<p class="font-weight-bold">The data in the table comes from the google spreadsheet</p>

<a class="btn btn-primary mb-4" href="https://docs.google.com/spreadsheets/d/1t2_HHLkibAybPORmXuDDEFEyetC3p7r1blQRpjzinXg/edit?usp=sharing" role="button" target="_blank">Click to see the source sheet</a>

<!-- Table  -->
<table class="table table bordered table-striped" id="testTable">
  <!-- Table head -->
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <!-- Table head -->

  <!-- Table body -->
  <tbody id="demo">


  </tbody>
  <!-- Table body -->
</table>
<!-- Table  -->

<script>
 $.getJSON("https://spreadsheets.google.com/feeds/list/1t2_HHLkibAybPORmXuDDEFEyetC3p7r1blQRpjzinXg/od6/public/values?alt=json", function (data) {

      var sheetData = data.feed.entry;

      var i;
      for (i = 0; i < sheetData.length; i++) {

        var name = data.feed.entry[i]['gsx$_cn6ca']['$t'];
        var age = data.feed.entry[i]['gsx$_cokwr']['$t'];
        var email = data.feed.entry[i]['gsx$_cpzh4']['$t'];

        document.getElementById('demo').innerHTML += ('<tr>'+'<td>'+name+'</td>'+'<td>'+age+'</td>'+'<td>'+email+'</td>'+'</tr>');

      }
    });

</script>

这个结果女巫我想设法得到：https ://datatables.net/examples/ajax/defer_render.html

标签： javascriptsearch

Answer 1

您可以像这样为表格添加搜索、分页和排序： $('TABLE ID').DataTable(); $('.dataTables_length').addClass('bs-select');

这是带有搜索功能的示例

 $.getJSON("https://spreadsheets.google.com/feeds/list/1t2_HHLkibAybPORmXuDDEFEyetC3p7r1blQRpjzinXg/od6/public/values?alt=json", function (data) {

      var sheetData = data.feed.entry;

      var i;
      for (i = 0; i < sheetData.length; i++) {

        var name = data.feed.entry[i]['gsx$_cn6ca']['$t'];
        var age = data.feed.entry[i]['gsx$_cokwr']['$t'];
        var email = data.feed.entry[i]['gsx$_cpzh4']['$t'];

        document.getElementById('demo').innerHTML += ('<tr>'+'<td>'+name+'</td>'+'<td>'+age+'</td>'+'<td>'+email+'</td>'+'</tr>');

      }
      
     $('#testTable').DataTable();
    $('.dataTables_length').addClass('bs-select');
    });

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<p class="font-weight-bold">The data in the table comes from the google spreadsheet</p>

<a class="btn btn-primary mb-4" href="https://docs.google.com/spreadsheets/d/1t2_HHLkibAybPORmXuDDEFEyetC3p7r1blQRpjzinXg/edit?usp=sharing" role="button" target="_blank">Click to see the source sheet</a>

<!-- Table  -->
<table id="testTable" class="table table bordered table-striped">
  <!-- Table head -->
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <!-- Table head -->

  <!-- Table body -->
  <tbody id="demo">


  </tbody>
  <!-- Table body -->
</table>
<!-- Table  -->

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>