如何将导出按钮添加到 html/jquery 数据表代码？

Question

我有一个代码html/jquery/bootstrap。我无法添加导出按钮，该按钮将下载 table 格式的数据。如何添加以 csv 和 excel 格式下载数据的导出按钮？

下面是代码

<html>
  <head>
    <!-- Favicon -->
    <!--link rel="shortcut icon" href="{{url_for('static', filename='images/favicon.ico')}}"-->

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script type = "text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script type = "text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type = "text/javascript"  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <!-- Datatable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script type = "text/javascript"  src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type = "text/javascript"  src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script type = "text/javascript"  src="https://cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js"></script>
  </head>
  <body>
    <div class="card">
      <div class="card-body">
        <form method="post">
<!--          <textarea class="form-control" rows="5" name="user_csv"></textarea>-->
          <button class="btn btn-success mt-2">Show output data</button>
        </form>
        <div class="mt-4">
          {% if request.method == 'POST'%}
            <table id="proxies" class="display table nowrap responsive" style="width: 100%">
              <thead>
                <tr>
                  {% for header in results[0].keys() %}
                    <th>{{header}}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for row in results %}
                  <tr>
                    {% for index in range(0, len(fieldnames)) %}
                      <td>{{row[fieldnames[index]]}}</td>
                    {% endfor %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% endif %}
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $('#proxies').DataTable();
  </script>

</html>

如何添加以 csv 和 excel 格式下载数据的导出按钮？

Answer 1

尝试在您的脚本中添加以下代码。
可以找到工作示例 here!

$('#proxies').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
} );

如何将导出按钮添加到 html/jquery 数据表代码？

How to add export button to html/jquery datatable code?

html

datatable

jquery

frontend

datatables