Javascript jQuery Datatables：将列可见性与单个列过滤器（文本输入）结合起来？

我正在使用和

问题在于，当用户向表中添加以前隐藏的列时，该列的文本字段框不会出现。因此，用户无法筛选该列

有人知道如何为隐藏列启用筛选器吗？理想情况下，这不会导致清除其他筛选器中的文本的副产品（如果用户确实在其他筛选器中输入文本）

这是我的过滤代码：

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

---

数据表中有一个自定义的

列可见性
事件。因此，您可以根据列的当前状态修改
元素的可见性

例如，您有
渲染功能，如下所示：

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

此方法的完整演示可能如下所示：


//示例数据源
常数dataSrc=[
{id:1，标题：'苹果'，猫：'水果'}，
{id:2，标题：'梨'，猫：'水果'}，
{id:3，标题：'香蕉'，猫：'水果'}，
{id:4，标题：'胡萝卜'，猫：'素食'}，
{id:5，标题：'茄子'，猫：'蔬菜'}
];
//数据表初始化
const dataTable=$（“#示例”）.dataTable({
数据：dataSrc，
dom:'Bfrtip'，
按钮：[“colvis”]，
列：['id'，'title'，'cat'].map（header=>（{title:header，data:header}）），
columnDefs：[
{目标：0，可见：false}
]
});
//将空白页脚追加到表中
$（'#示例'）。追加（''）；
//函数来渲染输入元素
常量renderFootInputs=（）=>{
//将以前的输入抓取到数组中
常量输入=[]；
dataTable.columns（）.every（函数（））{
prevInputs.splice（this.index（），1，$（`#示例tfoot[colindex=“${this.index（）}]”）.val（））；
});
//清除行内容
$（'#示例tfoot tr'）.empty（）
//遍历表列
dataTable.columns（）.every（函数（））{
//如果该列可见
这个.visible（）？
//追加相应的页脚
$（'#示例tfoot tr'）。追加（```）：
是的；
});
};
//上述函数的初始调用
RenderFootInputs（）；
//每次列可见性更改时调用该函数
$（'示例'）。on（'column-visibility.dt'，renderFootInputs）；
//个人搜索
$（'#示例'）。关于（'keyup'，'tfoot input'，函数（事件）{
dataTable.column（$（event.target）.attr（'colindex'））.search（$（event.target.val（））.draw（）；
});
tfoot输入{
显示：块；
}
tfoot th{
左侧填充：10px！重要；
}
数据表中有一个自定义的
列可见性事件。因此，您可以根据列的当前状态修改
元素的可见性

例如，您有
渲染功能，如下所示：

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

此方法的完整演示可能如下所示：


//示例数据源
常数dataSrc=[
{id:1，标题：'苹果'，猫：'水果'}，
{id:2，标题：'梨'，猫：'水果'}，
{id:3，标题：'香蕉'，猫：'水果'}，
{id:4，标题：'胡萝卜'，猫：'素食'}，
{id:5，标题：'茄子'，猫：'蔬菜'}
];
//数据表初始化
const dataTable=$（“#示例”）.dataTable({
数据：dataSrc，
dom:'Bfrtip'，
按钮：[“colvis”]，
列：['id'，'title'，'cat'].map（header=>（{title:header，data:header}）），
columnDefs：[
{目标：0，可见：false}
]
});
//将空白页脚追加到表中
$（'#示例'）。追加（''）；
//函数来渲染输入元素
常量renderFootInputs=（）=>{
//将以前的输入抓取到数组中
常量输入=[]；
dataTable.columns（）.every（函数（））{
prevInputs.splice（this.index（），1，$（`#示例tfoot[colindex=“${this.index（）}]”）.val（））；
});
//清除行内容
$（'#示例tfoot tr'）.empty（）
//遍历表列
dataTable.columns（）.every（函数（））{
//如果该列可见
这个.visible（）？
//追加相应的页脚
$（'#示例tfoot tr'）。追加（```）：
是的；
});
};
//上述函数的初始调用
RenderFootInputs（）；
//每次列可见性更改时调用该函数
$（'示例'）。on（'column-visibility.dt'，renderFootInputs）；
//个人搜索
$（'#示例'）。关于（'keyup'，'tfoot input'，函数（事件）{
dataTable.column（$（event.target）.attr（'colindex'））.search（$（event.target.val（））.draw（）；
});
tfoot输入{
显示：块；
}
tfoot th{
左侧填充：10px！重要；
}


$('#example').on('column-visibility.dt', renderTfootInputs);