dataTables分页页码缓存问题

最新推荐文章于 2022-11-01 17:31:48 发布

木鱼2020

最新推荐文章于 2022-11-01 17:31:48 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/qiny2020/article/details/50664303

web开发专栏收录该内容

4 篇文章

订阅专栏

当dataTables的stateSave参数设置为true时，分页信息会从web storage中读取，可能导致显示错误的页码。解决方法是将stateSave设置为false。分析了_fnLoadState和_fnSaveState函数，这两个函数分别负责加载和保存状态，包括页码和分页长度等信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于设置stateSave参数为true，dataTables每次分页信息从web store中获取，导致表格展现出错误的页码（上一次请求页码）。

解决办法：stateSave：false。

代码分析：

if ( oInit.bStateSave )
{
features.bStateSave = true;
_fnLoadState( oSettings, oInit );
_fnCallbackReg( oSettings, 'aoDrawCallback', _fnSaveState, 'state_save' );
}

--------------------------------------------------------------------------------------------------------------------------------
_fnLoadState()函数分析：

//从缓存中取上次页码信息（state），
var state = settings.fnStateLoadCallback.call( settings.oInstance, settings );
if ( ! state || ! state.time ) {
return;
}

//state与ajaxData封装成新setttings，setting中包含：dataTables所有参数数据、ajaxData数据、当前分页信息等。
// Restore key features - todo - for 1.11 this needs to be done by
// subscribed events
settings._iDisplayStart    = state.start;
settings.iInitDisplayStart = state.start;
settings._iDisplayLength   = state.length;
settings.aaSorting = [];

_fnCallbackFire( settings, 'aoStateLoaded', 'stateLoaded', [settings, state] );

--------------------------------------------------------------------------------------------------
_fnSaveState(stttings)函数分析

// bStateSave=true，取出缓存state.否则直接返回
if ( !settings.oFeatures.bStateSave || settings.bDestroying )
{
return;
}

/* Store the interesting variables */
var state = {
time:    +new Date(),
start:   settings._iDisplayStart,
length:  settings._iDisplayLength,
order:   $.extend( true, [], settings.aaSorting ),
search:  _fnSearchToCamel( settings.oPreviousSearch ),
columns: $.map( settings.aoColumns, function ( col, i ) {
return {
visible: col.bVisible,
search: _fnSearchToCamel( settings.aoPreSearchCols[i] )
};
} )
};