我在 Java 脚本位中有来自谷歌表的数据如何进行搜索 function 并确保 50000 加载行

Question

I am look for script witch one able to search table from html google sheet. and if there is a lot of data it have to load data or split them.

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

this result witch one i want manage to get: https://datatables.net/examples/ajax/defer_render.html

Answer 1

You can add search, pagination, and sort for the table like this: $('TABLE ID').DataTable(); $('.dataTables_length').addClass('bs-select'); $('TABLE ID').DataTable(); $('.dataTables_length').addClass('bs-select');

Here is the example with Search Function

 $.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>