从 pdf 导出中的数据表标题中删除选择选项答案

【问题标题】：Remove select options from datatable header in pdf export从 pdf 导出中的数据表标题中删除选择选项
【发布时间】：2020-11-14 08:51:52
【问题描述】：

我在数据表的标题中包含了选择元素。现在，当我导出为 pdf 时，所有选项都会附加并显示在标题中。我不想在标题中显示这些值。

<script>



$(document).ready(function() {

  $('#colSearch').DataTable( {

    
     dom: 'Bfrtip',
     buttons: [
        {
           extend: 'excel',
           exportOptions: {
           columns: [ 0, 1, 2, 3, 4, 5, 6 ]
           }
        },
        {
           extend: 'pdf',
           exportOptions: {
           columns: [ 0, 1, 2, 3, 4, 5, 6 ],
        },
        
     ],
     

     initComplete: function () {
        this.api().columns([0,1,2,3,4,5,6]).every( function () {
           
        var column = this;
        var select = $('<select><option value=""></option></select>')
           .appendTo( $(column.header()))
           .on( 'change', function () {
              var val = $.fn.dataTable.util.escapeRegex(
                 $(this).val()
              );

              column
              .search( val ? '^'+val+'$' : '', true, false )
              .draw();
           });

           $( select ).click( function(e) {
              e.stopPropagation();
           });

           column.data().unique().sort().each( function ( d, j ) {
              var val = $('<div/>').html(d).text();
              select.append( '<option value="' + val + '">' + val + '</option>' );
           });
        });
         },

      });
   });
</script>

此提供的解决方案会删除所有标题。 https://stackoverflow.com/a/54803204/9660462

【问题讨论】：

标签： datatable datatables

【解决方案1】：

您可以将format.header 选项添加到现有的exportOptions：

exportOptions: {
  columns: [ 0, 1, 2, 3, 4, 5, 6 ],
  format: {
    header: function ( data ) {
      var n = data.indexOf("<select>");
      if (n > -1) {
        return data.substring(0, n);
      } else {
        return data;
      }
    }
  }
}

以上代码假定您的 DataTable 的标题中包含 HTML，类似于以下内容：

<th class="sorting">
    Office
    <select>
      <option value=""></option><option value="Edinburgh">Edinburgh</option><option value="London">London</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option><option value="Singapore">Singapore</option><option value="Sydney">Sydney</option><option value="Tokyo">Tokyo</option>
    </select>
</th>

这会导致标题包含以下文本，这是来自 th 元素的所有内部 HTML：

Office<select><option value=""></option><optionvalue="Edinburgh">Edinburgh</option><option value="London">London</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option><option value="Singapore">Singapore</option><option value="Sydney">Sydney</option><option value="Tokyo">Tokyo</option></select>

为了排除下拉值（在我的例子中，办公室位置），并且只显示标题（在我的例子中，单词“Office”），我的代码检查第一个 <select> 的位置提取文本中的子字符串。然后它会忽略从那时起的所有内容。

format.header 选项记录在 this page 中。

【讨论】：