Question

我正在使用数据表创建一些带有数据的表。我使用的选项是他们必须包含下载CSV按钮。但是，由于我要处理大量数据，因此我想在屏幕上显示“正在加载，请稍候...” gif，以便用户知道它正在下载。但是，我所拥有的gif加载要求我在下载开始之前将其激活，并在下载完成后将其停用（实际上，这只是在正文中添加一个类，使其有点透明并添加了一个转轮gif）。在下载之前和之后，我还没有找到一种运行代码的方法。我想我可以在action之前做，但不能在之后做。

有人可以帮我吗？有没有一种方法可以在下载之前和下载之后进行编码？或者，如果没有，是否有更好的方法可以在准备要下载的csv时实现等待的gif？

Answer 1

您可以扩展csv按钮并在其中调用原始操作。这样，您就可以在处理导出时显示自定义加载指示器。

$(document).ready(function() {

  let table = $('#example').DataTable({
    processing: true,
    dom: 'Bfrtip',
    buttons: [{
      extend: 'csv',
      text: 'CSV Export',
      action: function(e, dt, button, config) {
        console.log('csv button clicked');
        this.processing(true); // show indicator on button
        console.log('before csv export');
        config.filename = 'my-export'; // set filename
        $.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config); // call export-action
        console.log('after csv export');
        this.processing(false); // hide indicator on button
      }
    }],
  });

});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test-1</td>
      <td>Test 1234</td>
    </tr>
    <tr>
      <td>Test-3</td>
      <td>I dont know!</td>
    </tr>
    <tr>
      <td>Test-2</td>
      <td>Another...</td>
    </tr>
    <tr>
      <td>Alpha-1</td>
      <td>Apple Test</td>
    </tr>
    <tr>
      <td>Alpha-2</td>
      <td>Banana Test</td>
    </tr>
    <tr>
      <td>Alpha-3</td>
      <td>Coconut</td>
    </tr>
    <tr>
      <td>Beta-1</td>
      <td>Beta</td>
    </tr>
    <tr>
      <td>Beta-2</td>
      <td>Not Alpha</td>
    </tr>
    <tr>
      <td>Alpha-1</td>
      <td>Apple Test</td>
    </tr>
    <tr>
      <td>Alpha-2</td>
      <td>Banana Test</td>
    </tr>
    <tr>
      <td>Alpha-3</td>
      <td>Coconut</td>
    </tr>
    <tr>
      <td>Beta-1</td>
      <td>Beta</td>
    </tr>
    <tr>
      <td>Beta-2</td>
      <td>Not Alpha</td>
    </tr>
  </tbody>
</table>

在使用数据表（JS）下载文件之前和之后执行代码

1 个答案: