Экспорт данных по нескольким найденным и выбранным строкам - PullRequest
1 голос
/ 08 июня 2019

Я не могу экспортировать несколько раз найденные и выбранные данные в 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();
        }
    });
});

1 Ответ

0 голосов
/ 08 июня 2019

Это известное ограничение при использовании обработки на стороне сервера. В этом случае объект datatable знает только данные текущего рисования. По этой причине вы можете экспортировать только видимое / визуализированное содержимое таблицы.

Если вы хотите экспортировать данные из всех выбранных в данный момент строк, вы можете прослушать события select.dt и deselect.dt таблицы данных и сохранить данные строки выбора в дополнительном массиве, из которого вы можете создать csv-данные для экспорта.

Дополнительную информацию и примеры о событиях можно найти в официальной документации:

Всякий раз, когда выбор изменяется, событие отправляется. Мы можем прослушать событие select, проверить, имеет ли выбор тип row, и добавить данные в массив или объект. Поскольку мы хотим предотвратить дублирование, мы должны выбрать уникальный ключ для данных (на основе идентификатора или некоторых других данных строки).

В зависимости от того, как вы реализовали вашу таблицу данных и обработку, вы должны следить за 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);

Примечание. Если в ваших данных есть строки, включающие двойные кавычки ", вам нужно экранировать их дополнительной дополнительной кавычкой "".

...