數據表中 select 元素中的動態過濾值

Question

在Datatables中使用以下多重過濾select輸入代碼是否可以在一個過濾器中進行選擇時僅顯示其他 select 輸入中的可用值？ 更准確地說，在這個例子中，如果我 select 'Tokyo' as an Office ，我只想在Position的下拉菜單中填充值 'Accountant'、'Integration Specialist'、'Support Engineer' 和 'Regional Marketing' .

$(document).ready(function() {
$('#example').DataTable( {
    initComplete: function () {
        this.api().columns([1,2]).every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
} );
} );

////// here I get the unique values of each filtered `select` option
$('select').on('change', function () {
            var dtable = $('#datatable').DataTable();

            var filteredArray = [];
            var filteredArray2 = [];

            dtable.column(1, { search: 'applied' }).data()
            .unique()
            .sort()
            .each(function (value, index) {
                filteredArray.push(value);
            });

            dtable.column(2, { search: 'applied' })
            .data()
            .unique()
            .sort()
            .each(function (value, index) {
                filteredArray2.push(value);
            });

            console.log(filteredArray);
            console.log(filteredArray2);

});

在我的情況下，我在兩列中只有過濾器，如上面的代碼片段所示，因此在選擇兩個過濾器之一時，理想情況下我希望僅在另一個過濾器中顯示可用值。

盡管我已經設法在選擇時獲得每個過濾器的唯一值，但我正在努力隱藏所有不存在於filteredArray中的input值

Answer 1

這是執行此操作的一種方法。

最終結果如下：

構建一個僅包含列的未過濾（可見）值的下拉列表相對簡單。 在這樣做的核心，我們使用以下內容：

columns( { search: 'applied' } ).data()[index]

大多數復雜性與管理兩個下拉菜單的相互關聯狀態有關。 加載頁面后，首先使用的下拉菜單被指定為“主要”下拉菜單，另一個被指定為“次要”下拉菜單。 每當用戶從主要下拉列表中選擇新值時，我們必須清除次要下拉列表； 然后在應用主要下拉過濾器后，我們必須重新構建輔助下拉列表的值列表。

最終結果是這樣的：

<script type="text/javascript">

/* Each drop-down selection affects the values in the other drop-downs */

var primaryColIdx;
var secondaryColIdx;

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
          populateDropdowns(this);
        }
    } );

} );

function populateDropdowns(table) {
    table.api().columns([1,2]).every( function () {
        var column = this;
        //console.log("processing col idx " + column.index());
        var select = $('<select><option value=""></option></select>')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var dropdown = this;
                doFilter(table, dropdown, column);
                rebuildSecondaryDropdown(table, column.index());
            } );

        column.data().unique().sort().each( function ( val, idx ) {
            select.append( '<option value="' + val + '">' + val + '</option>' )
        } );
    } );
}

function doFilter(table, dropdown, column) {
    // first time a drop-down is used, it becomes the primary. This
    // remains the case until the page is refreshed:
    if (primaryColIdx == null) {
        primaryColIdx = column.index();
        secondaryColIdx = (primaryColIdx == 1) ? 2 : 1;
    }

    if (column.index() === primaryColIdx) {
        // reset all the filters because the primary is changing:
        table.api().search( '' ).columns().search( '' );
    }

    var filterVal = $.fn.dataTable.util.escapeRegex($(dropdown).val());
    //console.log("firing dropdown for col idx " + column.index() + " with value " + filterVal);
    column
        .search( filterVal ? '^' + filterVal + '$' : '', true, false )
        .draw();
}

function rebuildSecondaryDropdown(table, primaryColIdx) {
    var secondaryCol;

    table.api().columns(secondaryColIdx).every( function () {
        secondaryCol = this;
    } );

    // get only the unfiltered (unhidden) values for the "other" column:
    var raw = table.api().columns( { search: 'applied' } ).data()[secondaryColIdx];
    // the following uses "spread syntax" (...) for sorting and de-duping:
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
    var uniques = [...new Set(raw)].sort();

    var filteredSelect = $('<select><option value=""></option></select>')
        .appendTo( $(secondaryCol.footer()).empty() )
        .on( 'change', function () {
            var dropdown = this;
            doFilter(table, dropdown, secondaryCol);
            //rebuildSecondaryDropdown(table, column.index());
        } );

    uniques.forEach(function (item, index) {
        filteredSelect.append( '<option value="' + item + '">' + item + '</option>' )
    } );

}

</script>