使用在数据表中不起作用的按钮集合导出选定的行

Question

我正在尝试仅从数据表中导出选定的行。通过将扩展选项设置为 csv，我可以成功地将选定的行导出到 csv 文件，如下面的代码所示。

buttons: [
    'colvis',
    'selectAll',
    'selectNone',
    {
        extend: 'csv',
        text: 'Export Selected',
        exportOptions: {
            columns: ':visible:not(.not-exported)',
            modifier: {
                 selected: true
            }
        },
        title: 'Data export'
    }
],

但是我想要一个下拉列表（csv，复制，打印），我可以从中选择将选择的行导出到。我尝试在下面的代码中使用集合。但它导出所有可见的行。有人请帮忙

buttons: [
    'colvis',
    'selectAll',
    'selectNone',
    {
        extend: 'collection',
        text: 'Export Selected',
        buttons: ['copy','csv','print'],
        exportOptions: {
            columns: ':visible:not(.not-exported)',
            modifier: {
                 selected: true
            }
        },
        title: 'Data export'
    }
],

Answer 1

您只需使用rows: '.selected'. 但是：即使您使用的是集合，您仍然需要为每个按钮提供设置。IE

buttons: ['copy','csv','print'],

应该

buttons: [
  { extend :'copy',
    exportOptions : {
     columns: ':visible:not(.not-exported)',
     rows: '.selected'
  }
  ...
]

您可以通过重用简单的文字来减少代码量

var exportOptions = {
  columns: ':visible:not(.not-exported)',
  rows: '.selected'
}

工作示例代码将像这样结束：

buttons: [
  'colvis',
  'selectAll',
  'selectNone',
  {
    extend: 'collection',
    text: 'Export Selected',
    buttons: [
      { extend : 'copy',
        exportOptions: exportOptions
      },
      { extend : 'csv',
        exportOptions: exportOptions
      },
      { extend : 'print',
        exportOptions: exportOptions
      }
    ]   
  }
]

这是一个演示 -> https://jsfiddle.net/youn7zm4/