jquery 打印/CSV/PDF基于输入选择的列过滤的DataTable值-不过滤

oo7oh9g9  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(127)

我有一个dataTable,其中的列(7)具有动态填充和可编辑的下拉值。我创建了一个过滤器(#filter6),但是当我试图打印/csv/pdf表时,整个表显示,而不是过滤的行。我有6个其他过滤器(基于文本字段),完美地与打印/csv/pdf的工作,它只是最后一个过滤器,不。我怀疑这与第7列表格单元格中的自定义输入元素有关,这些元素导致了print/csv/pdf正确过滤表格的问题,以下是我的代码:

$(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.
    } 
  });
67up9zun

67up9zun1#

根据@andrewJames的建议,显示/隐藏似乎是问题所在,下面是解决问题的修订代码。

// 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);

相关问题