Question

在页面刷新时，状态保持不变。

在页面刷新时，应显示下拉列表选定值，但不会在下拉列表中选择所有值。

if ($("#tblcontracts") !== null) {

    var tableContract = $('#tblcontracts').DataTable({
        "stateSave": true,
        "order": [[0, "desc"]],
        "language": {
            "searchPlaceholder": "Search",
            "lengthMenu": "Showing _MENU_ contracts",
            "zeroRecords": "Sorry no contract(s) found",
            "info": "Showing _START_ of _END_ of _TOTAL_ contracts",
            "infoEmpty": "No contract(s) found",
            "infoFiltered": "(filtered from _MAX_ total contracts)"

        },
        initComplete: function () {
            var ColumnNo = 0;
            this.api().columns().every(function () {

                if (ColumnNo == 0) {
                    var column = this;
                    var select = $('<select><option value="">---ALL---</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>')
                    });
                }

Answer 1

加载表格后，您可以从表格状态中读取列搜索数据，然后从下拉列表中选择适当的值。

在initComplete回调中，您可以添加以下内容，将与当前过滤条件匹配的选项标记为selected：

var filter = tableContract.state().columns[0].search.search;

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

如果saveState设置为true，则tableContract.state().columns[0].search.search应包含第0列的搜索值。

单个列过滤不保存下拉列表jQuery的状态

1 个答案: