如何实现基于用户选择的HTML表格可自定义列并持久化？

核心思路 #

要让用户的列显示/隐藏设置持久化，需要完成两个关键动作：

1. 用户切换列可见性时，实时保存当前所有列的状态
2. 页面加载初始化表格时，读取已保存的状态并恢复列的显示状态

下面提供两种可行方案，按需选择：

方案一：前端localStorage快速实现 #

无需后端改动，适合单设备使用场景，直接修改现有JS代码即可：

修改后的JavaScript代码 #

// 定义存储键名，若有登录用户ID，建议改为`calendar_columns_${当前用户ID}`避免多用户冲突
const STORAGE_KEY = 'calendar_table_column_visibility';

$(document).ready(function () {
    var table = $('#all_table').DataTable({
        searching: false,
        paging: false,
        info: false,
        initComplete: function() {
            // 表格初始化完成后恢复列状态
            restoreColumnState(table);
        }
    });
    customiseCalendarView(table);
});

function customiseCalendarView(table) {
    $('a.toggle-vis').on('click', function (e) {
        e.preventDefault();

        var columnIndex = $(this).attr('data-column');
        var column = table.column(columnIndex);

        // 切换列可见性
        column.visible(!column.visible());
        // 保存当前所有列的状态
        saveColumnState(table);
        // 同步更新按钮样式（可选，让用户直观看到隐藏状态）
        $(this).toggleClass('text-muted', !column.visible());
    });
}

// 把列状态保存到localStorage
function saveColumnState(table) {
    const visibilityArray = table.columns().visible().toArray();
    localStorage.setItem(STORAGE_KEY, JSON.stringify(visibilityArray));
}

// 从localStorage读取并恢复列状态
function restoreColumnState(table) {
    const savedState = localStorage.getItem(STORAGE_KEY);
    if (savedState) {
        const visibilityArray = JSON.parse(savedState);
        visibilityArray.forEach((isVisible, index) => {
            table.column(index).visible(isVisible);
            // 同步按钮样式
            $(`a.toggle-vis[data-column="${index}"]`).toggleClass('text-muted', !isVisible);
        });
    }
}

可选优化：按钮状态样式 #

给隐藏列的按钮加个灰化效果，用户能一眼区分：

a.toggle-vis.text-muted {
    color: #6c757d;
    opacity: 0.7;
}

方案二：后端持久化（支持跨设备/登录后保留） #

如果需要用户登录后在任意设备都能同步列设置，需要把状态存储到后端数据库：

1. 前端代码修改 #

function saveColumnState(table) {
    const visibilityArray = table.columns().visible().toArray();
    // 发送请求到后端接口，携带用户ID和列状态
    $.post('/api/user/save-column-settings', {
        userId: '替换为当前登录用户ID',
        columnVisibility: visibilityArray
    });
}

// 页面初始化时从后端获取用户的列设置
function restoreColumnState(table) {
    $.get('/api/user/get-column-settings', { userId: '替换为当前登录用户ID' }, function(response) {
        if (response && response.columnVisibility) {
            response.columnVisibility.forEach((isVisible, index) => {
                table.column(index).visible(isVisible);
                $(`a.toggle-vis[data-column="${index}"]`).toggleClass('text-muted', !isVisible);
            });
        }
    });
}

2. 后端接口逻辑（伪代码） #

• 保存接口：接收用户ID和列状态数组，将数组序列化为JSON字符串，存储到用户表的column_visibility字段中
• 获取接口：根据用户ID查询数据库，返回存储的JSON字符串并反序列化为数组，返回给前端

注意事项 #

• 若表格列的数量或顺序有变动，需处理兼容性：比如新增列默认设为可见，避免状态不匹配导致异常
• 前端存储的键名建议绑定用户标识，防止同一设备多用户使用时状态混乱
• 后端存储时，注意JSON数据的序列化/反序列化处理，避免格式错误

内容的提问来源于stack exchange，提问作者Vidhya Sagar Potnuru