使用jquery或其他更好的方法下载大型记录

Question

在我的用户界面上，有一个高级搜索部分，其中用户选择7种不同的东西，如下图所示，并根据这些参数调用一个web服务。User服务以JSON格式返回搜索结果，这些记录以用户界面中的表格格式显示。

类似于这的东西(使用jqxwidget)

因此，在表格部分下面有一个Export to Excel按钮，显示所有记录，就像上面的jsfiddle显示的那样。

如果用户一单击“下载”按钮，我就必须下载excel/csv格式的记录，那么有什么比在jQXwidgets中使用JSFiddle更好的吗？

我想离开jqxwidget的原因是，他们要求提供托管在我的RHEL服务器上的URL，这给我在Apache上设置虚拟主机带来了问题。他们要求的原因是记录在87000或更多，并处理负载，我需要在我的服务器上有他们的解决方案。

下面是关于我的UI的更多信息(下图)以及下面的一些信息：

​

​

因此，开始时，用户只看到Advanced Search部分，直到Search和Clear按钮。在从下拉框中选择东西之后，用户单击Search按钮.这将在后端调用搜索web服务。用Search results (81702)显示一个新表，如上面的图表所示。

在桌子下面，我有Export to Excel按钮。这就是我遇到问题的地方，因为记录太大了，而且我使用的jQWidget无法处理超过600个记录。因此，他们要求我在我的服务器上托管他们的源代码文件等等。

Answer 1

为了使用表管理数据，我建议使用DataTables。它很容易管理，它也有一个很好的模板和许多有用的控件，例如:搜索、分页、排序、过滤.下载(Excel，CSV，PDF格式)。

以下是您可能需要添加的一些库：

CSS：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />

剧本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script>
    $('table').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'excelHtml5',
            'csvHtml5'
        ]
    });
</script>

​

$('table').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'excelHtml5',
        'csvHtml5'
    ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

​