由于设置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] )
- };
- } )
- };
相关推荐
### 对DataTable进行分页获取数据的方法解析 在处理大量数据时,为了提高用户体验及系统性能,通常会采用分页技术来展示数据。本篇文章将详细解释如何针对`DataTable`对象实现分页功能,并通过示例代码来具体说明其...
- **缓存策略**:对于频繁访问的分页数据,可以考虑使用缓存(如Redis)来提高响应速度。 - **错误处理**:确保当用户输入非法页码或每页大小时,系统能正确处理并给出友好的提示。 - **UI设计**:分页控件的界面...
3. **排序与搜索**:结合jQuery或其他JavaScript库(如Bootstrap DataTables),可以实现分页的同时支持表格的排序和搜索功能。 四、优化与注意事项 - 考虑到用户体验,分页请求应尽可能快速,避免用户等待。 - 为...
Struts2.0 是一个流行的Java Web开发框架,它提供了一种组织和控制MVC(Model-...同时,随着技术的发展,现代的Web应用可能更倾向于使用ORM框架(如Hibernate)和前端分页库(如jQuery DataTables)来简化分页实现。
4. **用户交互**:创建分页导航元素(如页码按钮),并绑定事件处理器来响应用户的分页操作。 5. **UI更新**:根据当前页码动态更新DOM以显示相应页面的数据。 6. **性能优化**:考虑数据缓存、懒加载等策略,减少...
- 分页缓存:对于频繁访问的数据,可以使用缓存技术,提高数据获取速度。 - infinite scroll(无限滚动):当用户滚动到底部时自动加载下一页,提供连续浏览体验,但需注意避免过度加载。 5. 源码与工具: - 在...
在ASP.NET中,分页控件是用于处理大量数据展示的重要组件,尤其在数据表格或者搜索结果的场景下,分页能够有效地提高用户体验,避免一次性加载过多的数据导致页面响应速度变慢。 标题"asp.net分页控件"指向的是ASP...
在网页开发中,分页是一种常见的用户界面设计,用于处理大量数据时的浏览效率问题。当数据集过于庞大,一次性加载所有内容会消耗过多资源,影响用户体验。`jQuery` 是一个广泛使用的 JavaScript 库,提供了丰富的...
1. 前端实现:JavaScript库如jQuery、Vue.js、React.js等提供了丰富的表格组件,如DataTables、Element UI、Ant Design等,它们内置了排序和分页功能,开发者只需配置相应的参数即可。 2. 后端实现:服务器端进行...
**jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转化为交互式数据视图。服务器端分页(Server-side pagination)是其核心特性之一,尤其适用于处理大量...
- **jQuery**:jQuery提供了一些插件,如`datatables`,可以轻松实现`datalist`的分页功能。 - **Vue.js / React.js**:这些现代前端框架都有相应的组件库,如`Element UI`(Vue)或`Material-UI`(React),它们...
在实现分页的过程中,还需要考虑数据的缓存和更新问题。例如,当新的数据被添加或现有数据被修改时,分页信息可能需要实时更新。这可能涉及到前端的实时刷新、后端的实时推送(如WebSocket)或者利用Ajax进行异步...
在实际应用中,开发者还需要关注性能优化,如使用缓存减少请求次数,以及考虑SEO友好性,确保搜索引擎能正确索引分页内容。 综上所述,pagination分页是网页开发中不可或缺的一部分,尤其是在大数据展示场景下。...
为了提供更流畅的用户体验,可以使用jQuery插件(如jQuery DataTables)或ASP.NET AJAX来实现无刷新分页。这需要在后端创建Web服务或WCF服务,返回JSON或XML数据,然后在前端使用JavaScript处理分页。 **5. 自定义...
3. **前端分页**:利用JavaScript库(如jQuery DataTables)在客户端进行分页,减轻服务器压力。 总结,Java分页技术是Web应用中不可或缺的一部分,通过合理的设计和实现,我们可以为用户提供高效、友好的数据浏览...
在实际应用中,可能还需要考虑其他因素,比如分页和排序的性能优化,数据的缓存策略,以及不同浏览器的兼容性问题。但掌握了基本原理和步骤后,就可以灵活地应对各种复杂情况。通过不断实践和学习,你将在ASPX开发中...
`DataTables`是Bootstrap中一个强大的插件,它可以将普通的HTML表格转化为具有排序、搜索、分页等功能的交互式表格。在使用`DataTables`时,需要在HTML文件中引入相关的CSS和JS文件,并对目标表格添加特定的类名,如...
- 使用JavaScript库,如jQuery的Datatables、React的Material-UI Table或者Vue的Element UI Table,它们都提供了分页功能,与后端API交互获取所需数据页。 5. **请求与响应**: - 在前后端交互时,前端通过HTTP...
1. **性能优化**: 为了提高性能,避免每次请求都计算总记录数,可以考虑在查询时缓存结果或使用数据库的内置分页功能。 2. **动态排序**: 允许用户自定义排序字段和顺序。 3. **搜索过滤**: 添加查询参数以支持按...
4. **el-pagination**:这是Element UI提供的分页组件,用于处理大量数据的分页显示,可以自定义页码、每页显示数量、样式等,使得用户可以便捷地浏览长列表。 5. **过滤(filter)**:在`vuedatatables`中,过滤...