DataTables：如何在preInit中设置页面？

假设我应该能够通过

DataTablesApiInstance.page（pageNumber）

设置页面，但我无法让它工作

所有其他API方法，如

search

和

order

似乎都可以正常工作

这是我的密码：

$(document)
    .on('preInit.dt', (ev, settings) => {
        let tableId = ev.target.id;
        let tableState = _.get(['datatables', tableId], history.state) || {};

        let api = new $.fn.dataTable.Api(settings);

        if(tableState.hasOwnProperty('page')) {
            api.page(tableState.page); // <-- problem is here; page doesn't get set
        }

        if(tableState.hasOwnProperty('search')) {
            api.search(tableState.search);
        }

        if(tableState.hasOwnProperty('order')) {
            api.order(tableState.order);
        }

        const setState = (key, value) => {
            history.replaceState(_.set(['datatables', tableId, key], value, history.state), '');
        };

        api.on('page', ev => {
            let info = api.page.info();
            // console.log('page', tableId, info.page);
            setState('page', info.page);
        });

        api.on('order', ev => {
            let order = api.order();
            // console.log('order', tableId, order);
            setState('order', order);
        });

        api.on('search', ev => {
            setState('search', api.search());
        });
    });

如何在不引发第二个ajax请求的情况下设置页面？

从jQuery DataTables开始使用分页的DataTables时，可以使用option定义数据显示的起点

它可以在服务器端处理模式下正确处理表，并且只执行1个Ajax请求

var table = $("#example").DataTable({
     "processing": true,
     "serverSide": true,
     "ajax": "/test",
     "displayStart": 200     
 });

从：

请注意，此参数是记录数（从

0

开始计算），而不是页码，因此，如果每页有

10

记录，并且希望从第三页开始，则它应该是

20

，而不是

2

或

3

这并没有（直接）回答如何在preInit中设置页面的问题，但它解决了我的问题

我们可以使用从history API加载状态（包括页面），而不是像默认实现那样使用

localStorage

（即使在导航离开然后再次返回时，也会记住状态）

---

你也需要

draw（）

这个页面->

api.page（tableState.page）。draw（）

@davidkonrad谢谢，不过我也试过了<代码>.draw（'page'）。没用。我不认为有必要在

preInit

上使用它，但它会在之后立即绘制。发现：看起来这个问题从未解决过。我开了一张罚单：问题是我不想把这段代码复制到我网站上使用的每个数据表上。我正在尝试做一个全面的测试，这就是为什么我在

文档

上收听

preInit

事件的原因。如果我可以从那里修改设置，我可以让它工作，但这是不可能的，是吗？@mpen，可能还有其他选择，但在我们深入研究之前，为什么你不使用它来保存/恢复分页以及其他参数，如搜索、顺序等。？如果您想实现自己的状态保存机制，您可以使用并且不需要

preInit.dt

事件处理程序。

stateSave

是否只在页面重新加载/返回时起作用？还是它会永远记住它？因为我只希望在用户按下“后退”时恢复状态，这就是我开始走这条路的原因。@mpen，请参见主题中的。啊哈。这正是我想做的。我以前没见过，但我不能说我喜欢德克斯的解决方案。将JS添加到页面的每个链接以清除状态是一个非常糟糕的黑客行为。我的解决方案似乎与类似，只是我真的不想更改哈希。我想我可以用state save+load回调做我想做的事情。我会试试的，谢谢！

var table = $("#example").DataTable({
     "processing": true,
     "serverSide": true,
     "ajax": "/test",
     "displayStart": 200     
 });

$.extend(true, $.fn.dataTable.defaults, {
    stateSave: true,
    stateSaveCallback: (settings, data) => {
        let tableId = settings.nTable.id;
        if(!tableId) {
            // console.warn(`DataTable is missing an ID; cannot save its state`);
            return;
        }
        history.replaceState(_.set(['datatables', tableId], data, history.state), '');
    },
    stateLoadCallback: settings => {
        let tableId = settings.nTable.id;
        if(!tableId) {
            console.warn(`DataTable is missing an ID; cannot load its state`);
            return;
        }
        return _.get(['datatables', tableId], history.state) || null;
    }
});