如何在DataTable中为含shipment_id的行添加类并保存到sessionStorage

核心修改思路 #

需要在行点击事件中增加shipment_id的非空判断，同时调整sessionStorage的读写逻辑，只处理符合条件的行，最后在页面初始化时恢复选中状态。

1. 改造行点击事件逻辑 #

原来的点击事件直接切换选中状态，现在先获取当前行的shipment_id，只有非空时才执行选中/取消操作：

$('#example').on('click', 'tbody tr', function () {
    const $row = $(this);
    // 根据实际结构获取shipment_id：可以是单元格内容或data属性
    const shipmentId = $row.find('td:eq(对应列索引)').text().trim(); 
    // 或者用data属性：const shipmentId = $row.data('shipment-id');

    // 跳过shipment_id为空的行
    if (!shipmentId) return;

    const table = $('#example').DataTable();
    const row = table.row($row);

    if (row.hasClass('selected')) {
        row.removeClass('selected');
        removeSelectedId(shipmentId);
    } else {
        row.addClass('selected');
        addSelectedId(shipmentId);
    }
});

2. 封装sessionStorage操作 #

用两个简单方法管理选中的shipment_id，避免重复代码：

// 获取已选中的shipment_id列表
function getSelectedIds() {
    const stored = sessionStorage.getItem('selectedShipments');
    return stored ? JSON.parse(stored) : [];
}

// 添加选中的id到sessionStorage
function addSelectedId(id) {
    const ids = getSelectedIds();
    if (!ids.includes(id)) {
        ids.push(id);
        sessionStorage.setItem('selectedShipments', JSON.stringify(ids));
    }
}

// 从sessionStorage移除id
function removeSelectedId(id) {
    const ids = getSelectedIds().filter(item => item !== id);
    sessionStorage.setItem('selectedShipments', JSON.stringify(ids));
}

3. 页面初始化时恢复高亮 #

在DataTable的initComplete回调中，读取sessionStorage的id列表，给对应行添加selected类：

$('#example').DataTable({
    // 你的现有配置项（列定义、数据源等）
    initComplete: function () {
        const table = this.api();
        const selectedIds = getSelectedIds();

        selectedIds.forEach(id => {
            // 根据id匹配对应行（需和获取shipment_id的方式一致）
            const targetRow = table.rows().eq(0).filter(index => {
                return table.cell(index, 对应列索引).data().trim() === id;
                // 或者用data属性：return $(table.row(index).node()).data('shipment-id') === id;
            });

            if (targetRow.length) {
                table.row(targetRow).addClass('selected');
            }
        });
    }
});

注意事项 #

• 替换代码中的对应列索引为你实际shipment_id所在的列序号（从0开始计数），如果用data-shipment-id属性则无需调整这部分。
• 确保shipment_id的取值逻辑和你的HTML结构匹配，避免出现空值误判。
• sessionStorage是会话级存储，关闭浏览器标签后会清空，如果需要长期保存可以改用localStorage。

内容的提问来源于stack exchange，提问作者laurence keith albano