DataTables状态保存失效：页面跳转后如何保留筛选状态？

页面跳转后返回索引页时，DataTables无法恢复之前的筛选状态，已尝试配置stateSave: true但未生效。需要实现返回后无需重新填写筛选条件，自动恢复之前的筛选状态。

1. 当前代码每次点击筛选按钮都会销毁并重建DataTables实例，导致stateSave保存的状态被清空——状态是绑定在表格实例上的，实例销毁后状态也会丢失。
2. DataTables默认的stateSave仅保存自身内置状态（如分页、排序、内置搜索），自定义的筛选参数（如idDataKlinik）和外部搜索框的值不会被自动保存。

1. 自定义状态保存逻辑 #

通过stateSave、stateSaveCallback和stateLoadCallback扩展保存/恢复逻辑，加入自定义筛选参数和搜索框值。

2. 保留表格实例 #

点击筛选按钮时，直接通过ajax.reload()更新表格数据，传递新的筛选参数，避免销毁实例导致状态丢失。

3. 初始化时自动恢复状态 #

页面加载时读取保存的状态，自动填充筛选框和搜索框，仅当无保存状态时才显示筛选模态框。

JavaScript代码 #

var baseUrl = "<?= base_url();?>";
function initRemoteDataKlinik(object) {
    var object = $(object);
    object.select2({
        dropdownParent: $("#barangFilter"),
        ajax: {
            url: `${baseUrl}/RemoteData/remoteDataKlinik`,
            dataType: "json",
            type: "POST",
            data: function (param) {
                var query = { search: param.term };
                return query;
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.NAMA,
                            id: item.UUID,
                        };
                    }),
                };
            },
        },
        cache: true,
        minimumInputLength: 3,
        language: {
            inputTooShort: function () {
                return "Minimal 3 karakter atau lebih";
            },
        },
        placeholder: "Cari Data Klinik",
        width: "100%",
        allowClear: true,
    });
}

$(document).ready(function() {
    initRemoteDataKlinik('.remoteDataKlinik');
    
    // 读取本地存储的保存状态
    var savedState = JSON.parse(localStorage.getItem('DataTables_barangTable_')) || {};
    var savedIdDataKlinik = savedState.customData?.idDataKlinik || '';
    var savedSearchValue = savedState.search?.search || '';

    // 恢复搜索框值
    $("#searchBarang").val(savedSearchValue);
    // 恢复筛选框选中状态
    if(savedIdDataKlinik) {
        $('.remoteDataKlinik').val(savedIdDataKlinik).trigger('change');
    } else {
        // 无保存状态时显示筛选模态框
        $('#barangFilter').modal('show');
    }

    // 初始化表格
    var table = $('#barangTable').DataTable({
        "processing": true,
        "serverSide": true,
        "stateSave": true, // 启用状态保存
        "stateSaveCallback": function(settings, data) {
            // 扩展保存内容，加入自定义筛选参数
            data.customData = {
                idDataKlinik: $('.remoteDataKlinik').val(),
                searchBarang: $("#searchBarang").val()
            };
            localStorage.setItem('DataTables_' + settings.sInstance + '_', JSON.stringify(data));
        },
        "stateLoadCallback": function(settings) {
            // 读取保存的状态并恢复搜索框值
            var data = JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance + '_'));
            if(data) {
                $("#searchBarang").val(data.customData?.searchBarang || '');
            }
            return data;
        },
        "language": {
            "emptyTable": "Tolong pilih Data Klinik terlebih dahulu!"
        },
        "ajax": {
            url: `${baseUrl}/Barang/Barang/barangDatatables`,
            type: "POST",
            data:function(d) {
                // 动态传递当前筛选参数
                d.idDataKlinik = $('.remoteDataKlinik').val();
            },
        },
        "aLengthMenu": [
            [25, 50, 100, -1],
            [25, 50, 100, "All"]
        ],
    });
    
    new $.fn.dataTable.Buttons(table, {
        lengthChange: false,
        buttons: ['print', 'pdf', 'excel', 'csv']
    });
    table.buttons().container().appendTo('#customButtonTemplate');

    // 搜索框事件：实时更新表格搜索
    $("#searchBarang").keyup(function() {
        table.search(this.value).draw();
    });

    // 筛选按钮事件：重载表格而非销毁重建
    $('#buttonFilter').click(function() {
        var selectedId = $('.remoteDataKlinik').val();
        if(selectedId) {
            $('#barangFilter').modal('hide');
            table.ajax.reload();
            // 手动触发状态保存，确保筛选条件立即存入本地
            table.state.save();
        }
    });
});

关键改动说明 #

• 启用stateSave并通过回调扩展保存内容，将自定义筛选参数和搜索框值加入状态存储。
• 页面初始化时自动读取保存的状态，填充筛选框和搜索框，减少用户重复操作。
• 点击筛选按钮时不再销毁表格，通过ajax.reload()刷新数据，保留表格实例和状态。

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