DataTables: How to set page in preInit?
<p><a href="https://datatables.net/reference/api/page()" rel="nofollow noreferrer">The docs</a> say that I should be able to set the page via <code>DataTablesApiInstance.page(pageNumber)</code>, but I can't get it to work.</p>

<p>All the other API methods like <code>search</code> and <code>order</code> seem to work fine. </p>

<p>Here's my code:</p>

<pre><code>$(document)
    .on('preInit.dt', (ev, settings) =&gt; {
        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); // &lt;-- 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) =&gt; {
            history.replaceState(_.set(['datatables', tableId, key], value, history.state), '');
        };

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

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

        api.on('search', ev =&gt; {
            setState('search', api.search());
        });
    });
</code></pre>

<p>The method is hit, but the page isn't set. Am I using the wrong API method? Is there another way to set the page before the data loads?</p>

<p>I'm using <code>datatables.net@1.10.12</code>.</p>

<hr>

<p>If I defer the call to <code>init</code> instead of <code>preInit</code> then the correct page number is highlighted, but the data is still from the first page. If I add a 0ms delay on top of that (as below), it does work, but causes a 2nd data fetch + draw.</p>

<pre><code>if(tableState.page) {
    api.on('init', ev =&gt; {
        setTimeout(() =&gt; {
            api.page(tableState.page).draw('page');
        }, 0);

    });
}
</code></pre>

<p>How can I set the page without incurring a 2nd ajax request?</p>