将数据导出为CSV格式的表格数据后，下载的文件中没有显示任何数据吗？

如何解决将数据导出为CSV格式的表格数据后，下载的文件中没有显示任何数据吗？

如何使用HTML按钮单击而不是DataTable生成的按钮将数据表中的CSV或PDF格式的数据导出？

我尝试使用$("#export").click(function(){ $("table").tableToCSV(); });方法导出数据。

但是下载的csv文件中没有数据。

如何将导出功能添加到HTML按钮？

我的小提琴：https://jsfiddle.net/helloIndia/2nary46x/5/

HTML：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<div class="tab-content mt-5" id="myTabContent">
  <div class="tab-pane fade show active" id="kt_tab_pane_all" role="tabpanel" aria-labelledby="kt_tab_pane_all">
    <div class="Inner_kt_tableR">
      <div class="Inner_kt_tableR_top">
        <div class="row">
          <div class="col-sm-6">
            <div class="Inner_kt_tableR_top_inner">
              <a href="javascript:void(0);" data-toggle="modal" data-target="#addstaffModal" class="form_brntnxd minwdth mrbtmklright">Add</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Archive</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Export</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn mrbtmklright">Import</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn" data-toggle="modal" data-target="#addfilterfModal">Filters • 3</a>
              <div class="f_p_searchk"><input type="text" class="form-control" placeholder="Search"><i class="fas fa-search"></i></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="cool_page_nitionsd_main">
              <div class="cool_page_info" id="student_page_info"></div>
              <div class="cool_page_nitionsd" id="student_page_nitionsd"></div>
              <div class="cool_page_viewd" id="student_page_viewd"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="dt_kdtable forcheckqbox">
        <!--begin: Datatable-->
        <button>
        EXPORT AS CSV
        </button>
        <table id="allstudent_dt" class="table display table-checkable setclose" style="border-collapse:collapse;">
          <thead>
            <tr>
              <th class="dt-left" rowspan="1" colspan="1" style="width: 30px;">
                <label class="checkbox checkbox-single">
                  <input type="checkbox" value="" class="group-checkable">
                  <span></span>
                </label>
              </th>
              <th></th>
              <th>Name</th>
              <th>Status</th>
              <th>Exp.</th>
              <th>Level</th>
              <th>Date Added</th>
              <th>Last Contact</th>
            </tr>
          </thead>
        </table>
        <!--end: Datatable-->

      </div>
    </div>
  </div>
</div>

`

Js：

var jsonData = [
    {
       "id": "1","name": "John Doe","status": "Active","grandex": "12/01/2020","fundlevel": "100%","dateadded": "Oct 27,2020","lastcontact": "Dec 31,"info": {
           "amount_paid": "$ 1,500.00","credits_paid": "21 / 109","expiration": "June 2024","email": "[e-mail]","phone_number": "[phone]","college": "Community College",}
    },{
       "id": "2","name": "William Santiago",}
    }
];

var table = $('#allstudent_dt').DataTable({
  "dom": 'Btplis',buttons: [
            'csv'
    ],"language": {
    "responsive": true,"lengthMenu": "View _MENU_","info": "_END_ of _TOTAL_","paginate": {
      "next": "Next","previous": "Prev"
    }
  },"data": jsonData,"initComplete": function() {
    $("#student_page_nitionsd").append($("#allstudent_dt_wrapper .dataTables_paginate"));
    $("#student_page_viewd").append($("#allstudent_dt_wrapper .dataTables_length"));
    $("#student_page_info").append($("#allstudent_dt_wrapper .dataTables_info"));
  },"columns": [
     { 
        "data": "id","orderable": false,"render": function() {
           var html = '<label class="checkbox checkbox-single">' +
                  '<input type="checkbox" value="" class="group-checkable">' +
                  '<span></span></label>';
                  
           return html;
        }
     },{
        "className": 'details-control',"data": null,"defaultContent": ''
     },{ "data": "name" },{ "data": "status" },{ "data": "grandex" },{ "data": "fundlevel" },{ "data": "dateadded" },{ "data": "lastcontact" }
  ],"order": [
    [2,'asc']
  ],});

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr class="set_format_clool">'+
            '<td>Amount Paid:</td>'+
            '<td>' + d.info.amount_paid + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Credits Paid:</td>'+
            '<td>' + d.info.credits_paid + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Expiration:</td>'+
            '<td>' + d.info.expiration + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Email:</td>'+
            '<td>' + d.info.email + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Phone Number:</td>'+
            '<td>' + d.info.phone_number + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Colleger:</td>'+
            '<td>' + d.info.college + '</td>' +
        '</tr>' +
    '</table>';
}

// Add event listener for opening and closing details
$('#allstudent_dt tbody').on('click','td.details-control',function () {
   var tr = $(this).closest('tr');
   var row = table.row( tr );

   if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
  }
  else {
     // Open this row
     row.child( format(row.data()) ).show();
     tr.addClass('shown');
  }
});