php - 数据表 1.10 : Using saveState to remember filtering and order but need to update address URL to have shareable link for others

Question

在对列进行排序或使用短语过滤结果时，我使用 saveState: true 来保留数据表的条件。当我刷新页面时，由于本地存储，条件仍然存在。

这在同一个浏览器中效果很好，但想象一下一个非常常见的情况，当您将排序和过滤应用到表后，您希望通过简单地复制和粘贴带有查询字符串的长 URL 来与您的 friend 共享此状态这样当他/她打开它时， table 看起来一模一样。

There was a plugin that used to do this但它没有得到维护，并且在尝试之后，它根本无法与 1.10 一起使用。

我想知道是否可以通过仅使用一些 native 代码来解决此问题，也许可以使用 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 }},
    });
});

根据这段代码，明显的问题是 ajax URL 是我的硬编码 Laravel 路由。简单地传递查询字符串是行不通的。

我的 Laravel 路线很简单:http://iosportal.local/admin/api/customer，它返回 JSON 形状以适合数据表。

有人可以提示我如何解决这个问题吗？

Answer 1

我发现将当前状态存储为 base64 既简单又便携。您需要创建某种 UI 来检索状态，可以是任何状态，但在最原始的情况下，您可以有一个按钮:

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

并做这样的事情:

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

现在将其作为查询参数附加以获取您的可共享网址:

https://example.com?state=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);
        }
    }
}

请注意，我在这里跳过“时间”属性，因为它可能会使您的状态到期失效。