我有一个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.
}
});
1条答案
按热度按时间67up9zun1#
根据@andrewJames的建议,显示/隐藏似乎是问题所在,下面是解决问题的修订代码。