带有colVis，colReorder和save状态的JQuery Datatable列过滤

如何解决带有colVis，colReorder和save状态的JQuery Datatable列过滤

我有一个使用JQuery DataTables插件的表。另外，我允许用户切换列可见性和拖动列。除非启用了saveState选项，否则一切都很好。

我的表格并未在所有列上进行过滤，但其中一些是某些列的输入字段，有些是下拉列表。

启用“状态保存”功能后，它将在可见字段上绘制过滤器，而不是同时考虑隐藏字段，因此过滤器与该列上显示的数据不匹配。

以下相关代码：

1. 数据表选项：

sourceSets {
    main {
        resources {
            srcDirs 'config'
        }
    }
}

1. 将输入搜索添加到列标题：表初始化后：

    tableElem = $('#detections_dt_table');
    recordsDatatable = $(tableElem).DataTable(
        {
            dom: 'lBSrtip',buttons: [
                {
                    extend: 'colvis',columns: ':not(.noVis)',text: '<i class="fas fa-eye"></i> ' + translations.columnVisibility,collectionLayout: 'two-column',className: 'btn btn-lg btn-dark'
                }
            ],columnDefs: [] // 29 columns here,serverSide: true,processing: true,ajax: {} // Ajax to server side
            colReorder: true,paging: true,info: true,searching: true,filter: true,ordering: true,pageLength: 25,pagingType: 'full_numbers',order: [[2,'desc']],stateSave: true,stateSaveParams: function (settings,data) {
                // Clear filter search state save
                for (let i = 0; i < data.columns.length; i++) {
                    delete data.columns[i].search;
                }
            }
        });

1. 将下拉列表添加到列过滤器：

    // Add input search to column header
    recordsDatatable .columns([1,3,4,5,7,8,9,12,14,19,20,21,22,23,24,26,27,28]).every(function (index) {
        let title = $('#tableContainer thead tr:first th:eq(' + index + ')');
        $(title).html("<div class='input-group'><input id='input" + index + "' type='text' class='form-control search-input' data-index='" + index + "' style='width:100%'/><button class=\"btn bg-transparent clear-filter\" style=\"margin-left: -40px; z-index: 100;\">\n" +
            "      <i class=\"fa fa-times\"></i>\n" +
            "    </button></div>");

        let that = this;

        $("#input" + index).on('keyup change',function () {
            //prevent date update while clearing filters

            let val = $.fn.dataTable.util.escapeRegex(
                $(this).val()
            );
            //Visible index
            let visIdx = $(this).parent().parent().index();
            //Convert to data index (with colVisib and colReorder)
            let dataIndex = recordsDatatable .column.index('fromVisible',visIdx);

            if (!preventDataUpdate) {
                recordsDatatable 
                    .column(dataIndex)
                    .search(val)
                    .draw();
            }
            if (!detectionListFreeze) {
                // Freeze view avoiding the update of the table
                freezeView(true,true);
            }
        });
    });

1. 当我从服务器检索下拉过滤器值时，我使用以下代码加载每个过滤器：

    //Show filters as dropdown
    recordsDatatable .columns([6,10,11,13,15,16,17,18,29]).every(function (index) {
        let column = this;
        //create a unique id for the select control to load values.
        let colDefs = recordsDatatable .settings().init().aoColumnDefs;
        let filterId = 'filter-select-' + colDefs[index].name;

        let elem = $('#tableContainer thead tr:first th:eq(' + index + ')');

        $(elem)
            .html('<select id="' + filterId + '" class="form-control filter-select" data-index="' + index + '"><option value="" data-icon="fa-filter">' + translations.All + '</option></select>');

        $(elem).find('select').on('change',function () {
            let visIdx = $(this).parent().index();
            //Convert to data index (with colVisib and colReorder)
            let dataIndex = recordsDatatable .column.index('fromVisible',visIdx);
            let val;
            switch (dataIndex) {
                case 6:
                    val = $(this).val();
                    break;
                default:
                    val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    break;
            }
            if (!preventDataUpdate) {
                //Visible index
                recordsDatatable 
                    .column(dataIndex)
                    .search(val)
                    .draw();
            }
            // If freeze view is not enabled,freeze view
            if (!detectionListFreeze) {
                freezeView(true,true);
            }
        });
    });

    // TODO: Get filter data from server
    //Load response data into select controls
    loadFiltersResponseInSelects (response);

在隐藏某些列的同时，有什么想法可以调整其相应列上的过滤器吗？

谢谢。