Javascript 将数据表数据导出为CSV不会'；是否在下载的文件中不显示任何数据？

如何使用HTML按钮而不是dataTable generated按钮在dataTable中以CSV或PDF格式导出数据

我尝试使用

$（“#导出”）导出数据方法

但下载的csv文件中未显示任何数据

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

我的小提琴：

HTML:


导出为CSV
名称
地位
经验。
水平仪
添加日期
最后联系

`

Js:

var jsonData=[
{
“id”：“1”，
“姓名”：“约翰·多伊”，
“状态”：“活动”，
“grandex”：“2020年1月12日”，
“资金水平”：“100%”，
“添加日期”：“2020年10月27日”，
“最新联系人”：“2020年12月31日”，
“信息”：{
“支付金额”：“$1500.00”，
“已支付学分”：“21/109”，
“到期日”：“2024年6月”，
“电子邮件”：“约翰。doe@gmail.com",
“电话号码”：（321）456-7890，
“学院”：“社区学院”，
}
},
{
“id”：“2”，
“姓名”：“威廉·圣地亚哥”，
“状态”：“活动”，
“grandex”：“2020年1月12日”，
“资金水平”：“100%”，
“添加日期”：“2020年10月27日”，
“最新联系人”：“2020年12月31日”，
“信息”：{
“支付金额”：“$1500.00”，
“已支付学分”：“21/109”，
“到期日”：“2024年6月”，
“电子邮件”：“约翰。doe@gmail.com",
“电话号码”：（321）456-7890，
“学院”：“社区学院”，
}
}
];
var table=$（'#allstudent_dt'）。数据表({
“dom”：“Btplis”，
按钮：[
“csv”
],
“语言”：{
“响应”：正确，
“长度菜单”：“查看菜单”，
“信息”：“总数”的“结束”，
“分页”：{
“下一步”：“下一步”，
“上一个”：“上一个”
}
},
“数据”：jsonData，
“initComplete”：函数（）{
$（“#student_page_initionsd”）.append（$（#allstudent_dt_wrapper.dataTables_paginate”）；
$（“#学生#页面viewd”）.append（$（#所有学生dt_wrapper.dataTables_length”）；
$（“#学生#页面#信息”）。追加（$（“#所有学生#dt#包装器。数据表#信息”）；
},
“栏目”：[
{ 
“数据”：“id”，
“可订购”：错误，
“render”：函数（）{
var html=''+
'' +
'';
返回html；
}
},
{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{“数据”：“名称”}，
{“数据”：“状态”}，
{“数据”：“grandex”}，
{“数据”：“基金级别”}，
{“数据”：“已添加日期”}，
{“数据”：“lastcontact”}
],
“命令”：[
[2，‘asc’]
],
});
函数格式（d）{
//`d`是该行的原始数据对象
返回“”+
''+
'支付金额：'+
“+d.info.amount\u paid+”+
'' +
''+
“已支付的学分：”+
“+d.info.credits_paid+”+
'' +
''+
'到期：'+
“+d.info.expiration+”+
'' +
''+
'电子邮件：'+
“+d.info.email+”+
'' +
''+
'电话号码：'+
“+d.info.phone_number+”+
'' +
''+
“科勒格：”+
“+d.info.college+”+
'' +
'';
}
//为打开和关闭详细信息添加事件侦听器
$（'#allstudent_dt tbody'）。在（'click'，'td.details control'，函数（）{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}
否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
});
如果您使用google
jquery将html表格导出为csv
那么有很多指南我尝试使用此方法导出表格数据：-但是导出的csv中没有显示任何数据。我也更新了小提琴。请检查@CarstenLøvboAndersen
<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>

var jsonData = [
    {
       "id": "1",
       "name": "John Doe",
       "status": "Active",
       "grandex": "12/01/2020",
       "fundlevel": "100%",
       "dateadded": "Oct 27, 2020",
       "lastcontact": "Dec 31, 2020",
       "info": {
           "amount_paid": "$ 1,500.00",
           "credits_paid": "21 / 109",
           "expiration": "June 2024",
           "email": "john.doe@gmail.com",
           "phone_number": "(321) 456-7890",
           "college": "Community College",
       }
    },
    {
       "id": "2",
       "name": "William Santiago",
       "status": "Active",
       "grandex": "12/01/2020",
       "fundlevel": "100%",
       "dateadded": "Oct 27, 2020",
       "lastcontact": "Dec 31, 2020",
       "info": {
           "amount_paid": "$ 1,500.00",
           "credits_paid": "21 / 109",
           "expiration": "June 2024",
           "email": "john.doe@gmail.com",
           "phone_number": "(321) 456-7890",
           "college": "Community College",
       }
    }
];

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',
        "orderable": false,
        "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');
  }
});