我正在使用基本的列可见性和单个列搜索(文本输入(。
问题是,当用户向表中添加了一个先前隐藏的列时,该列的文本字段框不会显示。因此,用户无法过滤该列。
有人知道如何启用过滤器的隐藏列吗?理想情况下,这不会导致在其他过滤器中清除文本的副产品(如果用户确实在其他过滤器中输入文本(。
这是我的过滤代码:
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#tableID tfoot th').each( function () {
var title = $(this).text();
if ((title != '') && !(title.includes("$"))) {
// Then the current column is *not* the Action column.
$(this).html( '<span style="color: #515151; font-size:15px;"><i>Filter</i></span> <br> <input type="text" style="margin-top:10px;" placeholder="'+title+'" /> ' );
}
} );
var table = $('#tableID').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
} );
} );
</script>
我正在使用此行来隐藏我想默认要隐藏的列:
(table.column('.hideCol')).visible(false);
DataTables中有一个自定义column-visibility
事件。因此,您可以根据列的当前状态修改<input>
元素可见性。
例如。您具有<input>
渲染功能,这样:
//function to render input elements
const renderTfootInputs = () => {
//grab previous inputs into array
const prevInputs = [];
dataTable.columns().every(function(){
prevInputs.splice(this.index(), 1, $(`#example tfoot [colindex="${this.index()}"]`).val());
});
//purge <tfoot> row contents
$('#example tfoot tr').empty()
//iterate through table columns
dataTable.columns().every(function(){
//if the column is visible
this.visible() ?
//append corresponding footer <input>
$('#example tfoot tr').append(`<th><input colindex="${this.index()}" placeholder="${$(this.header()).text()}" value="${prevInputs[this.index()] || ''}"></input></th>`) :
true;
});
};
您可以在列可见性更改时称其为:
$('#example').on('column-visibility.dt', renderTfootInputs);
完整 demo 这种方法可能如下:
//sample data source
const dataSrc = [
{id: 1, title: 'apple', cat: 'fruit'},
{id: 2, title: 'pear', cat: 'fruit'},
{id: 3, title: 'banana', cat: 'fruit'},
{id: 4, title: 'carrot', cat: 'vegie'},
{id: 5, title: 'eggplant', cat: 'vegie'}
];
//datatables initialization
const dataTable = $('#example').DataTable({
data: dataSrc,
dom: 'Bfrtip',
buttons: ['colvis'],
columns: ['id','title','cat'].map(header => ({title: header, data: header})),
columnDefs: [
{targets: 0, visible: false}
]
});
//append blank footer to the table
$('#example').append('<tfoot><tr></tr></tfoot>');
//function to render input elements
const renderTfootInputs = () => {
//grab previous inputs into array
const prevInputs = [];
dataTable.columns().every(function(){
prevInputs.splice(this.index(), 1, $(`#example tfoot [colindex="${this.index()}"]`).val());
});
//purge <tfoot> row contents
$('#example tfoot tr').empty()
//iterate through table columns
dataTable.columns().every(function(){
//if the column is visible
this.visible() ?
//append corresponding footer <input>
$('#example tfoot tr').append(`<th><input colindex="${this.index()}" placeholder="${$(this.header()).text()}" value="${prevInputs[this.index()] || ''}"></input></th>`) :
true;
});
};
//initial call of above function
renderTfootInputs();
//call that function each time upon column visibility changes
$('#example').on('column-visibility.dt', renderTfootInputs);
//individual search
$('#example').on('keyup', 'tfoot input', function(event){
dataTable.column($(event.target).attr('colindex')).search($(event.target).val()).draw();
});
tfoot input {
display: block;
}
tfoot th {
padding-left: 10px !important;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="application/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
</head>
<body>
<table id="example"></table>
</body>
</html>
我已经与这个小片段合作,以隐藏/UNDIND单个列搜索,并与DataTables的列可见性事件集成。
$('#table').on( 'column-visibility.dt', function ( e, settings, column, state ) {
columnv = settings.aoColumns[column].bVisible;
if(columnv === false){
$('#table').find("tr.filters th:eq('"+column+"')").hide();
}else{
$('#table').find("tr.filters th:eq('"+column+"')").show();
}
});