首页 > 解决方案 > 如何使用javascript在数据库表(html)中只下载想要的数据?

问题描述

我无法从我只想要的表中下载数据。我有一个ejs文件可以检索数据并将其显示在表格中。然后我添加了一些input:search搜索表中的数据并仅显示与搜索栏中的字符串匹配的内容。我已经有了这个download按钮,它只下载整个表格我想要的是只下载表格中显示的内容,一旦我使用搜索栏。

我尝试在网上搜索,但我能看到的只是下载静态表数据/没有搜索查询。这是我遵循的如何将表格下载到 xls 文件https://www.codexworld.com/export-html-table-data-to-excel-using-javascript/

这是我的index.ejs

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<hr>
<div class="tableFixHead">
  <% if(details!=null) { %>
    <table class="text-center table table-striped table-hover table-dark table-fixed">
      <thead>
        <tr class="table-primary" style="color:black; font-weight:bold;">
          <th scope="col">Route</th>
          <th scope="col">Origin </th>
          <th scope="col">Destination</th>
          <th scope="col">Estimated Time of Arrival </th>
          <th scope="col">Date </th>
          <th scope="col">Time</th>
        </tr>
      </thead>
      <% details.forEach(function(item){ %>
        <tbody id="myTable">

          <tr>
            <td>
              <%= item.route%>
            </td>
            <td>
              <%= item.origin %>
            </td>
            <td>
              <%= item.destination%>
            </td>
            <td>
              <%= item.estimatedTimeOfArrival %>
            </td>
            <td>
              <%= item.date%>
            </td>
            <td>
              <%= item.time%>
            </td>
          </tr>
        </tbody>
        <% }) %>
    </table>
    <% } %>

</div>
<button onclick="exportTableToCSV('data.csv')">Download Table</button>
</div>

这是在搜索查询中过滤表的代码

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我希望一旦我使用搜索栏并且它只显示我想要的数据,一旦我点击下载按钮,它只会下载显示的数据而不是表中的全部数据。

例如,我1在表格中搜索数字,它只会显示所有有数字的数据,1所以这就是我只想下载的,但情况是点击后download它包括所有数字,而不仅仅是1 提前谢谢你。

标签: javascripthtmldatabaseejs

解决方案


推荐阅读