`

dataTables分页页码缓存、搜索缓存问题

阅读更多
由于设置stateSave参数为true,dataTables每次分页信息从web store中获取,导致表格展现出错误的页码(上一次请求页码)。
解决办法:stateSave:false。
代码分析:
[javascript] view plain copy
 
  1. if ( oInit.bStateSave )  
  2. {  
  3. features.bStateSave = true;  
  4. _fnLoadState( oSettings, oInit );  
  5. _fnCallbackReg( oSettings, 'aoDrawCallback', _fnSaveState, 'state_save' );  
  6. }  

--------------------------------------------------------------------------------------------------------------------------------
_fnLoadState()函数分析:
[javascript] view plain copy
 
  1. //从缓存中取上次页码信息(state),  
  2. var state = settings.fnStateLoadCallback.call( settings.oInstance, settings );  
  3. if ( ! state || ! state.time ) {  
  4. return;  
  5. }  
  6.   
  7. //state与ajaxData封装成新setttings,setting中包含:dataTables所有参数数据、ajaxData数据、当前分页信息等。  
  8. // Restore key features - todo - for 1.11 this needs to be done by  
  9. // subscribed events  
  10. settings._iDisplayStart    = state.start;  
  11. settings.iInitDisplayStart = state.start;  
  12. settings._iDisplayLength   = state.length;  
  13. settings.aaSorting = [];  
  14.   
  15. _fnCallbackFire( settings, 'aoStateLoaded''stateLoaded', [settings, state] );  
 

--------------------------------------------------------------------------------------------------
_fnSaveState(stttings)函数分析
[javascript] view plain copy
 
  1. // bStateSave=true,取出缓存state.否则直接返回  
  2. if ( !settings.oFeatures.bStateSave || settings.bDestroying )  
  3. {  
  4. return;  
  5. }  
  6.   
  7. /* Store the interesting variables */  
  8. var state = {  
  9. time:    +new Date(),  
  10. start:   settings._iDisplayStart,  
  11. length:  settings._iDisplayLength,  
  12. order:   $.extend( true, [], settings.aaSorting ),  
  13. search:  _fnSearchToCamel( settings.oPreviousSearch ),  
  14. columns: $.map( settings.aoColumns, function ( col, i ) {  
  15. return {  
  16. visible: col.bVisible,  
  17. search: _fnSearchToCamel( settings.aoPreSearchCols[i] )  
  18. };  
  19. } )  
  20. };  
分享到:
评论

相关推荐

    对DataTable分页获取数据

    ### 对DataTable进行分页获取数据的方法解析 在处理大量数据时,为了提高用户体验及系统性能,通常会采用分页技术来展示数据。本篇文章将详细解释如何针对`DataTable`对象实现分页功能,并通过示例代码来具体说明其...

    java分页控件.rar

    - **缓存策略**:对于频繁访问的分页数据,可以考虑使用缓存(如Redis)来提高响应速度。 - **错误处理**:确保当用户输入非法页码或每页大小时,系统能正确处理并给出友好的提示。 - **UI设计**:分页控件的界面...

    jQuery实现Table分页跳转

    3. **排序与搜索**:结合jQuery或其他JavaScript库(如Bootstrap DataTables),可以实现分页的同时支持表格的排序和搜索功能。 四、优化与注意事项 - 考虑到用户体验,分页请求应尽可能快速,避免用户等待。 - 为...

    struts2.0实现的数据分页实现及实现分页步骤

    Struts2.0 是一个流行的Java Web开发框架,它提供了一种组织和控制MVC(Model-...同时,随着技术的发展,现代的Web应用可能更倾向于使用ORM框架(如Hibernate)和前端分页库(如jQuery DataTables)来简化分页实现。

    ASP.NETjs分页

    4. **用户交互**:创建分页导航元素(如页码按钮),并绑定事件处理器来响应用户的分页操作。 5. **UI更新**:根据当前页码动态更新DOM以显示相应页面的数据。 6. **性能优化**:考虑数据缓存、懒加载等策略,减少...

    分页程序 转

    - 分页缓存:对于频繁访问的数据,可以使用缓存技术,提高数据获取速度。 - infinite scroll(无限滚动):当用户滚动到底部时自动加载下一页,提供连续浏览体验,但需注意避免过度加载。 5. 源码与工具: - 在...

    asp.net分页控件

    在ASP.NET中,分页控件是用于处理大量数据展示的重要组件,尤其在数据表格或者搜索结果的场景下,分页能够有效地提高用户体验,避免一次性加载过多的数据导致页面响应速度变慢。 标题"asp.net分页控件"指向的是ASP...

    使用jquery实现的分页

    在网页开发中,分页是一种常见的用户界面设计,用于处理大量数据时的浏览效率问题。当数据集过于庞大,一次性加载所有内容会消耗过多资源,影响用户体验。`jQuery` 是一个广泛使用的 JavaScript 库,提供了丰富的...

    table排序分页

    1. 前端实现:JavaScript库如jQuery、Vue.js、React.js等提供了丰富的表格组件,如DataTables、Element UI、Ant Design等,它们内置了排序和分页功能,开发者只需配置相应的参数即可。 2. 后端实现:服务器端进行...

    jquery datatable serverside page 服务器端分页

    **jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...

    datalist分页

    - **jQuery**:jQuery提供了一些插件,如`datatables`,可以轻松实现`datalist`的分页功能。 - **Vue.js / React.js**:这些现代前端框架都有相应的组件库,如`Element UI`(Vue)或`Material-UI`(React),它们...

    支持分页显示的网页数据表格

    在实现分页的过程中,还需要考虑数据的缓存和更新问题。例如,当新的数据被添加或现有数据被修改时,分页信息可能需要实时更新。这可能涉及到前端的实时刷新、后端的实时推送(如WebSocket)或者利用Ajax进行异步...

    pagination分页

    在实际应用中,开发者还需要关注性能优化,如使用缓存减少请求次数,以及考虑SEO友好性,确保搜索引擎能正确索引分页内容。 综上所述,pagination分页是网页开发中不可或缺的一部分,尤其是在大数据展示场景下。...

    asp.net中分页的实现

    为了提供更流畅的用户体验,可以使用jQuery插件(如jQuery DataTables)或ASP.NET AJAX来实现无刷新分页。这需要在后端创建Web服务或WCF服务,返回JSON或XML数据,然后在前端使用JavaScript处理分页。 **5. 自定义...

    Java分页技术

    3. **前端分页**:利用JavaScript库(如jQuery DataTables)在客户端进行分页,减轻服务器压力。 总结,Java分页技术是Web应用中不可或缺的一部分,通过合理的设计和实现,我们可以为用户提供高效、友好的数据浏览...

    jquery无刷新分页、排序_aspx开发教程.rar

    在实际应用中,可能还需要考虑其他因素,比如分页和排序的性能优化,数据的缓存策略,以及不同浏览器的兼容性问题。但掌握了基本原理和步骤后,就可以灵活地应对各种复杂情况。通过不断实践和学习,你将在ASPX开发中...

    Bootstrap表格控件的使用,与JAVA后台数据连接,可自动翻页

    `DataTables`是Bootstrap中一个强大的插件,它可以将普通的HTML表格转化为具有排序、搜索、分页等功能的交互式表格。在使用`DataTables`时,需要在HTML文件中引入相关的CSS和JS文件,并对目标表格添加特定的类名,如...

    java 跨页选择数据

    - 使用JavaScript库,如jQuery的Datatables、React的Material-UI Table或者Vue的Element UI Table,它们都提供了分页功能,与后端API交互获取所需数据页。 5. **请求与响应**: - 在前后端交互时,前端通过HTTP...

    springmvc4+hibernate4分页查询功能实现

    1. **性能优化**: 为了提高性能,避免每次请求都计算总记录数,可以考虑在查询时缓存结果或使用数据库的内置分页功能。 2. **动态排序**: 允许用户自定义排序字段和顺序。 3. **搜索过滤**: 添加查询参数以支持按...

    vuedatatablesVueJS2数据表格

    4. **el-pagination**:这是Element UI提供的分页组件,用于处理大量数据的分页显示,可以自定义页码、每页显示数量、样式等,使得用户可以便捷地浏览长列表。 5. **过滤(filter)**:在`vuedatatables`中,过滤...

Global site tag (gtag.js) - Google Analytics