Laravel中Yajra Datatable自定义lengthMenu刷新后保持选中状态

实现思路 #

用浏览器的localStorage存储用户选择的条目数，初始化表格时读取该值作为默认条目数，同时监听条目数变化事件更新存储值，确保刷新或返回页面时状态保留。

具体代码实现 #

1. 初始化Datatable时配置自定义lengthMenu并读取本地存储值：

// 从localStorage获取已保存的条目数，默认值设为10
var savedLength = localStorage.getItem('datatable_length') || 10;

var oTable = $('#table').DataTable({
    // 保留你原有的其他配置项
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]], // 自定义条目选项列表
    pageLength: parseInt(savedLength), // 设置默认显示条目数为存储的值
    // 监听表格绘制事件，保存当前选中的条目数
    drawCallback: function(settings) {
        var currentLength = settings._iDisplayLength;
        localStorage.setItem('datatable_length', currentLength);
    }
});

2. 保留你原有的筛选按钮逻辑：

$('#btn-filter').on('click', function(e) {
    oTable.draw();
    e.preventDefault();
});

补充说明 #

• 若希望仅在浏览器会话期间保留状态（关闭浏览器后清空），可将localStorage替换为sessionStorage。
• 确保datatable_length这个存储key在项目中唯一，避免和其他功能的存储数据冲突。
• 初始化时需把存储的字符串转为数字，因为localStorage仅支持存储字符串类型。

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