Remove select options from datatable header in pdf export

user_9660462 0
Viewed 592

I have included select element in header of datatable. Now all the options append and show in header when I export to pdf. I do not want to show these values in header.

<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>

This provided solution removes all of the header. https://stackoverflow.com/a/54803204/9660462

datatables datatable
1 Answers

You can add a format.header option to your existing 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;
      }
    }
  }
}

The above code assumes your DataTable contains HTML in its headings which looks similar to the following:

<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>

This causes the heading to contain the following text, which is all the inner HTML from the th element:

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>

To exclude the drop-down values (in my case, the office locations), and to only show the heading (in my case, the word "Office"), my code checks for the location of the first <select> substring in the extracted text. It then ignores everything from that point onwards.

The format.header option is documented in this page.

user_125673650
Related