Question

我无法将多次搜索和选择的数据导出到CSV。我正在从具有1000多个记录的数据库中获取数据。因此，例如，如果我在第一页上选择2行，那么我会搜索其他记录并选择该记录并导出，但是它仅导出搜索到的记录，而不是第一页中的记录。

$('#master tfoot th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

// DataTable

var master = $('#master').DataTable({
    dom: 'Blfrtip',
    buttons: [
        'copy',
        'csv',
        'excel',
        'pdf',
        {
            extend: 'print',
            text: 'Print all (not just selected)',
            exportOptions: {
                modifier: {
                    selected: null
                }
            }
        }
    ],
    select: true
});


// Apply the search
master.columns().every(function() {
    var that = this;

    $('input', this.footer()).on('keyup change', function() {
        if (that.search() !== this.value) {
            that
                .search(this.value)
                .draw();
        }
    });
});

Answer 1

这是在服务器端使用处理时的已知限制。在这种情况下，数据表对象仅知道当前绘图的数据。这就是为什么您只能导出表的可见/渲染内容的原因。

如果要从当前所有选中的行中导出数据，则可以侦听数据表的select.dt和deselect.dt事件，并将选择的行数据存储在一个额外的数组中您可以为导出创建csv数据。

有关事件的更多信息和示例，请参见官方说明：

每当选择更改时，都会调度一个事件。我们可以监听此select事件，检查所选内容是否为row类型，然后将数据添加到数组或对象中。由于我们想防止重复，因此我们应该为数据选择一个唯一键（基于该行的ID或其他数据）。

取决于您如何实现数据表和处理，您还必须注意deselect事件。也许可以在数据表中添加一些特殊的分页处理，以便当您再次导航到其他页面时，其他页面上的行将显示为选中状态。

let selectedRows = {}; // holds all the data of selected rows

let table = $('#example').DataTable({ /* settings */ });
table.on('select', function(e, dt, type, indexes) {
  if ( type === 'row' ) {
    let data = table.rows( indexes ).data();
    for (let item of data) {
      let key = item[0] + '_' + item[2] + '_' + item[2]; // an unique key, for example built from: eventName, firstName and lastName
      if (!(key in selectedRows)) {
        selectedRows[key] = item;
      } 
    }
  }
});
// Todo: handle deselect and maybe pagination...

然后您可以使用javascript将数据导出到浏览器中。

let csvData = 'COLUMN_1,COLUMN_2,COLUMN_3, ..., COLUMN_N';
for (let row of selectedRows) {
  csvData = csvData + '\n'
   + '"' + row.column_1 + '",'
   + '"' + row.column_2 + '",'
   + '"' + row.column_3 + '",'
   /* ... */
   + '"' + row.column_N + '",';

// Create temporary download-element
let a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([csvData], { type: 'text/csv;charset=utf-8;' }));
a.download = 'export.csv';
a.display = 'none';

// Append element to body and click it
document.body.appendChild(a);
a.click();

// Remove element from body
document.body.removeChild(a);

注意：如果数据中包含双引号"的字符串，则必须用额外的双引号""对其进行转义。

数据表导出多个搜索和选定的行

1 个答案: