Print/CSV/PDF a filtered DataTable values based on a column with input select - not filtering

Question

I have a dataTable in which a column (7) has drop-down values that are dynamically populated and editable. I created a filter that works (#filter6) however when I try to print/csv/pdf the table then the entire table shows and not the filtered rows. I have 6 other filters (based on text fields) that work perfectly with print/csv/pdf it's just the last filter that doesn't. I suspect it has to do with the custom input elements within the column 7 table cells are causing issues with print/csv/pdf the filtered table correctly, here is my code:

$(document).ready(function() {

 var dataTable = $('#dataTable').DataTable({
  "aLengthMenu": [[30, 50, 75, -1], [30, 50, 75, "All"]],
  "pageLength": 30,
  "dom": 'Bfrtip',
  "buttons": [
    {
      extend: 'print',
      exportOptions: {
        format: {
          body: function(data, row, column, node) {
            if (column === 6 && $(node).find('select').length) {
              return $(node).find('select option:selected').text();
            } else if (column === 7 && $(node).find('input.form-control').length) {
              return $(node).find('input').val();
            }
            return $(node).text().replace(/<[^>]+>/g, '');
          }
        }
      },
      customize: function(win) {
        $(win.document.body).find('table').addClass('nowrap');
        $(win.document.body).find('table td:nth-child(8)').addClass('text-wrap');
        $(win.document.body).find('select').remove();
        $(win.document.body).find('input[type="search"]').remove();
      }
    },
    {
      extend: 'csv',
      exportOptions: {
        format: {
          body: function(data, row, column, node) {
            if (column === 6 && $(node).find('select').length) {
              return $(node).find('select option:selected').text();
            } else if (column === 7 && $(node).find('input').length) {
              return $(node).find('input').val();
            }
            return $(node).text().replace(/<[^>]+>/g, '');
          }
        }
      }
    },
    {
      extend: 'pdf',
      exportOptions: {
        format: {
          body: function(data, row, column, node) {
            if (column === 6 && $(node).find('select').length) {
              return $(node).find('select option:selected').text();
            } else if (column === 7 && $(node).find('input').length) {
              return $(node).find('input').val();
            }
            return $(node).text().replace(/<[^>]+>/g, '');
          }
        }
      }
    }
  ]
});


// Filter event handlers for columns 1-6
for (var i = 0; i < 6; i++) {
  (function(index) {
    $('#filter' + index).on('change', function() {
      var value = $(this).val();
      dataTable.column(index).search(value).draw();
    });
  })(i);
}

// My attempt at column 7 (#filter6) which contains dropdowns filtering, seems to be working
$('#filter6').on('change', function() {
  var value = $(this).val();  
  dataTable.rows().eq(0).each(function(index) {

    var cell = dataTable.cell(index, 6).node(); // Access column 7 (index 6)
    var cellValue = $(cell).find('option:selected').val();
    if (cellValue === value) {
      dataTable.column(6).search("THIS NEEDS TO BE VALUE OF CELL").draw();  //This will match the cell contents which contains html and not just the option:selected part.
    } 
  });

Answer 1

Based on the suggestion from @andrewJames it appears show/hide was the issue, here is the revised code that solves the issue.

// Filter event handlers for columns 1-6
for (var i = 0; i < 6; i++) {
  (function(index) {
    $('#filter' + index).on('change', function() {
      var value = $(this).val();
      dataTable.column(index).search(value).draw();
      filter6(); // Trigger filter6 with its existing selected value
    });
  })(i);
}

function filter6() {
  var value = $('#filter6').val();

  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    var cell = dataTable.cell(dataIndex, 6).node(); // Access column 7 (index 6)
    var cellValue = $(cell).find('option:selected').val();
    
    if (value === 'All') {
      return true;
    }

    return cellValue === value;
  });

  dataTable.draw();
  $.fn.dataTable.ext.search.pop();
}

$('#filter6').on('change', filter6);