时间戳

首页 > 解决方案 > 数据表导出没有过滤器中的所有列值

javascript - 数据表导出没有过滤器中的所有列值

问题描述

我正在使用此代码过滤数据表中的列：https ://jsfiddle.net/41vgefnf/10/

// This code has been beautified via http://jsbeautifier.org/ with 2 spaces indentation.
$(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column));
  }

  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var ddmenu = cbDropdown($(column.header()))
          .on('change', ':checkbox', function() {
            var active;
            var vals = $(':checked', ddmenu).map(function(index, element) {
              active = true;
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

            // Highlight the current item if selected.
            if (this.checked) {
              $(this).closest('li').addClass('active');
            } else {
              $(this).closest('li').removeClass('active');
            }

            // Highlight the current filter if selected.
            var active2 = ddmenu.parent().is('.active');
            if (active && !active2) {
              ddmenu.parent().addClass('active');
            } else if (!active && active2) {
              ddmenu.parent().removeClass('active');
            }
          });

        column.data().unique().sort().each(function(d, j) {
          var // wrapped
            $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });

          $text.appendTo($label);
          $cb.appendTo($label);

          ddmenu.append($('<li>').append($label));
        });
      });
    }
  });
});

我启用了复制、Excel 和 CSV 按钮，以便在创建所需数据的视图后导出数据，但列过滤的所有值也会出现。

默认数据表仅在导出时返回列标题值，这正是我想要的。

标签： javascriptdatatabledatatables

解决方案

用于exportOptions过滤掉.cb-dropdown-wrap元素：

const exportOptions = {
  format: {
    header: function (data) {
      return $('<div></div>')
        .append(data)
        .find('.cb-dropdown-wrap')
        .remove()
        .end()
        .text()
    }
  }   
}

在 DataTables 配置中

buttons: [
  {
    extend: 'copyHtml5',
    exportOptions: exportOptions
  },
  {
    extend: 'excelHtml5',
    exportOptions: exportOptions
  },
  {
    extend: 'csvHtml5',
    exportOptions: exportOptions
  }
]

完全未经测试，jsfiddle 根本不包括导出。

与此答案基本相同->在导出到文件时忽略 Jquery Datatables 中的标头中的 HTML，因此您可能会说我可能已标记为欺骗...

推荐阅读