DataTables 1.10: Использование saveState для запоминания фильтрации и порядка, но необходимо обновить адрес URL, чтобы иметь доступную ссылку для других

Question

Я использую saveState: true, чтобы сохранить условия для моих таблиц данных при упорядочении столбцов или фильтрации результатов по фразе. Когда я обновляю страницу, условия сохраняются благодаря локальному хранилищу.

Это прекрасно работает в одном и том же браузере, но представьте себе довольно распространенный случай, когда после применения порядка и фильтрации к вашей таблице вы хотите поделиться этим состоянием со своим другом, просто скопировав и вставив длинный URL-адрес в строку запроса. так что, когда он / она открывает его, стол выглядит точно так же.

Был плагин, который использовал для этого , но он не поддерживается, и после попытки попробовать он вообще не работает с 1.10.

Интересно, возможно ли решить эту проблему, используя только собственный код и, возможно, replaceState, чтобы просто обновить URL, когда это применимо?

Это мой JS.

$(function () {
    let table = $('.table').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        stateSaveCallback: function (settings, data) {
            // save state
        },
        stateLoadCallback: function (settings) {
            // read state and change url?
        },

        ajax: '{{ route('admin.api.dt.customer.index') }}',
        columnDefs: [{
            orderable: false,
            targets: 2
        }],
        pageLength: {{ \App\Repositories\Sync\CustomerRepository::PER_PAGE_DATA_TABLES }},
    });
});

Основываясь на этом коде, очевидная проблема заключается в том, что URL ajax является моим жестко заданным маршрутом Laravel. Простая передача строки запроса не работает.

Мой маршрут Laravel просто: http://iosportal.local/admin/api/customer, и он возвращает JSON в форме, подходящей для DataTables.

Может кто-нибудь подсказать, как к этому подойти?

Answer 1

Я нашел сохранение текущего состояния, поскольку base64 был легок и переносим. Вам нужно будет создать какой-то интерфейс для получения состояния, которое может быть любым, но на самом примитивном уровне у вас может быть кнопка:

<a id="get-state">Get State</a>

И сделайте что-то вроде этого:

$('#get-state').on('click', function() {
    var saved = btoa(JSON.stringify(table.state()));
    alert('state=' + saved);
})

Теперь добавьте это как параметр запроса, чтобы получить ваш общий URL:

https://example.com? Состояние = eyJzZWFyY2giOnsic2VhcmNoIjoibWVvdyIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19

Для восстановления состояния есть что-то вроде этого в ваших параметрах:

// use stateLoadParams() instead of stateLoadCallback() since the former
// is designed for exactly what you want — manipulating the loaded state
"stateLoadParams": function (settings, data) {
    // check the current url to see if we've got a state to restore
    var url = new URL(window.location.href);
    var state = url.searchParams.get("state");
    if (state) {
        // if so, try to base64 decode it and parse into object from a json
        try {
            state = JSON.parse(atob(state));
            // now iterate over the object properties and assign any that
            // exist to the current loaded state (skipping "time")
            for (var k in state) {
                if (state.hasOwnProperty(k) && k != 'time') {
                    data[k] = state[k];
                }
            }
        } catch (e) {
            console.error(e);
        }
    }
}

Примечание. Я пропускаю здесь атрибут "время", поскольку он может сделать недействительным срок действия вашего состояния.