Hướng dẫn DataTable cơ bản: State Saving - Part 3

Hãy tưởng tượng người dùng đang lọc danh sách sản phẩm đến trang số 10, click vào xem chi tiết, sau đó nhấn Back quay lại mà bảng lại reset về trang 1 và mất sạch bộ lọc. Cảm giác đó thật sự "tệ". State Saving sinh ra để giải quyết vấn đề này bằng cách ghi nhớ trạng thái bảng vào trình duyệt.

1. Cách kích hoạt cơ bản

Chỉ cần thêm thuộc tính stateSave: true vào cấu hình khởi tạo. Mặc định, DataTables sẽ sử dụng localStorage để lưu trữ vĩnh viễn cho đến khi xóa cache.

$('#ajaxDataTable').DataTable({
    stateSave: true,
    stateDuration: 60 * 60 * 2 // Lưu trong 2 giờ (tính bằng giây)
});

2. Xử lý logic cho Individual Column Filter (Popup Dropdown)

Một vấn đề phát sinh: DataTable nhớ giá trị lọc, nhưng các thẻ UI tự chế (như icon filter tam giác) sẽ bị mất màu báo hiệu. Chúng ta cần dùng hàm state.loaded() để "nhắc" giao diện hiển thị đúng.

initComplete: function () {
    var api = this.api();
    var state = api.state.loaded(); // Lấy trạng thái cũ từ Storage

    api.columns().every(function () {
        var column = this;
        var colIndex = column.index();
        
        // ... (Code tạo dropdown filter) ...

        // KHÔI PHỤC TRẠNG THÁI GIAO DIỆN
        if (state) {
            var colState = state.columns[colIndex];
            if (colState && colState.search.search) {
                // Loại bỏ Regex ^ và $ để lấy text thuần
                var savedValue = colState.search.search.replace(/^\^|\$$/g, '');
                
                // Active lại icon và option trong menu
                $filterWrapper.find('.filter-icon').addClass('filter-active');
                $filterWrapper.find('.filter-option[data-value="' + savedValue + '"]').addClass('active');
            }
        }
    });
}

3. Khi nào nên và không nên dùng?

• Nên dùng: Các trang quản lý nội bộ, dashboard nhiều dữ liệu, danh sách sản phẩm dài.
• Không nên dùng: Các trang công cộng dùng chung máy tính (kiosk), hoặc khi dữ liệu thay đổi quá nhanh từng giây khiến filter cũ trở nên lỗi thời.

Lời kết: Một chi tiết nhỏ như State Saving lại là thước đo sự tinh tế của lập trình viên dành cho người dùng. Chúc các bạn ứng dụng thành công vào dự án ASP.NET MVC của mình!

Source code: DataTable-demo