ASP.NET DataTable数据过滤异常问题求助

问题说明 #

我在处理DataTable的数据过滤时遇到以下问题：

• 预期行为：已应用过滤的列，其筛选列表需保持完整；仅更新未应用过滤的列的筛选列表。
• 当前异常：关闭某列的筛选列表时，该列的筛选数据会自动更新，不符合预期。

现有代码 #

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        var savedFilters = JSON.parse(localStorage.getItem('savedFilters')) || {};
        var allFilterValues = JSON.parse(localStorage.getItem('allFilterValues')) || {};

        if ($.isEmptyObject(allFilterValues)) {
            initializeFilters();
        }

        $('#myTable thead th').each(function (index) {
            var arrow = $('<span/>').addClass('filter-arrow').html('&#9660;');
            $(this).append(arrow);
        });

        $('.filter-arrow').on('click', function () {
            var column = $(this).parent().index();
            showFilterContainer(column, $(this));
        });

        function showFilterContainer(column, arrow) {
            var filterContainer = $('#filter-container');
            if (!filterContainer.length) {
                filterContainer = $('<div/>', {
                    id: 'filter-container',
                    css: {
                        'position': 'absolute',
                        'background-color': '#fff',
                        'padding': '10px',
                        'border': '1px solid #ccc',
                        'box-shadow': '0px 2px 10px rgba(0,0,0,0.2)',
                        'display': 'none',
                        'z-index': 1000
                    }
                }).appendTo('body');
            } else {
                filterContainer.empty();
            }

            var arrowOffset = arrow.offset();
            filterContainer.css({
                'top': arrowOffset.top + 20,
                'left': arrowOffset.left
            }).data('column', column).show();

            populateFilterOptions(filterContainer, column);
        }

        function populateFilterOptions(filterContainer, column) {
            var values = allFilterValues[column] || [];
            values.sort().forEach(function (cellValue) {
                var listItem = $('<li/>');
                var label = $('<label/>').text(cellValue);
                var checkbox = $('<input/>', {
                    type: 'checkbox',
                    value: cellValue,
                    checked: savedFilters[column] && savedFilters[column].includes(cellValue)
                }).on('change', function () {
                    updateFilters(column);
                });

                listItem.append(label.prepend(checkbox)).appendTo(filterContainer);
            });
        }

        function updateFilters(column) {
            var checkedValues = $('#filter-container input[type="checkbox"]:checked').map(function () {
                return $(this).val();
            }).get();

            savedFilters[column] = checkedValues;
            localStorage.setItem('savedFilters', JSON.stringify(savedFilters));

            applyAllFilters();

            $('#myTable thead th').each(function (index) {
                var columnValues = [];
                $('#myTable tbody tr:visible').each(function () {
                    var cellValue = $.trim($(this).find('td').eq(index).text());
                    if (cellValue && !columnValues.includes(cellValue)) {
                        columnValues.push(cellValue);
                    }
                });
                allFilterValues[index] = columnValues;
            });
        }

        // Apply all filters
        function applyAllFilters() {
            $('#myTable tbody tr').each(function () {
                var row = $(this);
                var isRowVisible = Object.keys(savedFilters).every(function (filterColumn) {
                    if (!savedFilters[filterColumn].length) return true; // No filter applied for this column
                    var cellValue = $.trim(row.find('td').eq(filterColumn).text());
                    return savedFilters[filterColumn].includes(cellValue);
                });
                row.toggle(isRowVisible);
            });
        }

        function initializeFilters() {
            $('#myTable thead th').each(function (index) {
                var columnValues = [];
                $('#myTable tbody tr').each(function () {
                    var cellValue = $.trim($(this).find('td').eq(index).text());
                    if (cellValue && !columnValues.includes(cellValue)) {
                        columnValues.push(cellValue);
                    }
                });
                allFilterValues[index] = columnValues;
            });
            localStorage.setItem('allFilterValues', JSON.stringify(allFilterValues));
        }

        $(document).on('click', function (e) {
            if (!$(e.target).closest('#filter-container').length && !$(e.target).is('.filter-arrow')) {
                $('#filter-container').hide();
            }
        });
    });
</script>

应用界面截图 #

内容的提问来源于stack exchange，提问作者Piotr Sycz