Yajra/jQuery DataTable导出CSV时子行未包含问题求解

问题根因 #

DataTables 原生导出插件默认仅读取初始化时绑定的父行数据源，动态渲染的折叠子行不属于默认导出范围，你当前的前后端配置都未包含子行数据的导出逻辑，因此导出文件仅会保留父行内容。

调整方案 #

1. 前端导出配置修改 #

在CSV按钮的配置中新增自定义导出逻辑，主动读取每个父行对应的子行数据加入导出队列，修改后的配置参考：

dom: 'Bfrtip',
buttons: [
      {
      extend: 'csv',
      text: 'Export to CSV',
      className: 'btn btn-default',
      charset: 'utf-8',
      fieldSeparator: ',',
      bom: true,
      filename: 'Corporates',
      exportOptions: {
          columns: ':not(.notexport)',
          rows: function ( idx, data, node ) {
              return true;
          }
      },
      // 自定义导出数据，追加子行内容
      customize: function (csv, data) {
          let exportRows = [];
          data.rows.every(function(row) {
              exportRows.push(row.data);
              // 替换为你实际存储子行数据的DOM属性/字段
              let childRows = $(row.node).data('child-data') || [];
              childRows.forEach(child => {
                  // 可按需给子行内容加前缀、缩进和父行做区分
                  exportRows.push(child);
              })
              return true;
          })
          // 重构CSV内容
          let csvContent = data.headers.join(',') + '\n';
          exportRows.forEach(row => {
              csvContent += Object.values(row).map(val => `"${val?.toString().replace(/"/g, '""') || ''}"`).join(',') + '\n';
          })
          return csvContent;
      }
    }
],

如果你的子行数据是点击父行时才异步请求加载的，需要在导出前先触发所有父行的子行加载逻辑，确保所有子行数据都已存在于DOM缓存中再执行导出，否则还是会出现子行缺失的问题。

2. 后端数据返回调整 #

确保接口返回的父行数据中包含关联的子行内容，如果你子行数据是Corporate模型的关联数据，可通过预加载关联的方式补充数据，修改后的控制器代码参考：

public function index(Request $request)
{
    // 预加载子行对应的关联数据，associateData替换为你实际的关联方法名
    $corporate = Corporate::with('associateData')->get();
    if($request->ajax()){
        return Datatables::of($corporate)
        ->addIndexColumn()
        ->addColumn('created_at', function ($row) {
            return Carbon::createFromFormat('Y-m-d H:i:s', $row->created_at)->format('M d, Y');
        })
        ->addColumn('buttons', function ($row) {
            return '<a href="'.route('admin.corporate.edit',$row->id).'" class="btn btn-primary"> Update</a> &nbsp; <button onclick="deleteCorporate('.$row->id.')" class="btn btn-danger">Delete</button>';
        })
        // 新增子行数据字段，供前端渲染子行和导出时读取
        ->addColumn('child_data', function ($row) {
            return $row->associateData;
        })
        ->rawColumns(['buttons'])
        ->make(true);
    }
    return view('corporate.index');
}

前端渲染子行的时候，把接口返回的child_data存储到父行DOM的data-child-data属性中，供导出逻辑读取即可。

内容的提问来源于stack exchange，提问作者Vince