如何让浏览器记住通过ajax和jquery生成的多选项卡分页内容中显示的最后一个页面
How to make the browser remember the last page shown in multi-tab paginated content generated via ajax and jquery?
我有一个选项卡内容。基于下面的HTML:
<ul class="tabContainer">
</ul>
<div id="tabContent">
<div id="contentHolder">
<!-- The AJAX fetched content goes here -->
</div>
<div id="pagination"></div>
</div>
f_tab是管理上面HTML内容的函数,包括下面的操作:
- 生成标签
- 。
- 执行AJAX获取php页面并返回结果在标签符中。
使用jPaginator插件(https://github.com/remylab/jpaginator):
)对内容容器中的每个内容进行分页。function f_tab(str){ $(document).ready(function(){ var Tabs = { '1' : 'page1.php?p='+var, '2' : 'page2.php?p='+var, '3' : 'page3.php?p='+var, } var topLineColor = { blue:'lightblue', blue:'lightblue', blue:'lightblue',} $.each(Tabs,function(i,j){ var tmp = $('<li><a href="" class="tab">'+i+' <span class="left" /><span class="right" /></a></li>'); tmp.find('a').data('page',j); $('ul.tabContainer').append(tmp); }) var the_tabs = $('.tab'); the_tabs.click(function(e){ var element = $(this); if(!element.data('cache')) { $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); element.data('cache',msg); }); } else { $('#contentHolder').html(element.data('cache')); } e.preventDefault(); }) the_tabs.eq(2).click(); }); return false; }
分页函数(仅供参考)为:
(function($){
$.fn.extend({
MyPagination: function(options) {
var defaults = {
height: 600,
fadeSpeed: 1000
};
var options = $.extend(defaults, options);
//Creating a reference to the object
var objContent = $(this);
// other inner variables
var fullPages = new Array();
var subPages = new Array();
var height = 0;
var lastPage = 1;
var paginatePages=null;
var numero=0;
// initialization function
init = function() {
objContent.children().each(function(i){
if (height + this.clientHeight > options.height) {
fullPages.push(subPages);
subPages = new Array();
height = 0;
}
height += this.clientHeight;
subPages.push(this);
});
if (height > 0) {
fullPages.push(subPages);
}
// wrapping each full page
$(fullPages).wrap("<div class='page'></div>");
// hiding all wrapped pages
objContent.children().hide();
// making collection of pages for pagination
paginatePages = objContent.children();
numero=$(paginatePages).length;
// show first page
showPage(lastPage);
};
// show page function
showPage = function(page) {
i = page - 1;
if (paginatePages[i]) {
// hiding old page, display new one
$(paginatePages[lastPage]).hide();
lastPage = i;
$(paginatePages[lastPage]).fadeIn(options.fadeSpeed);
}
};
// show pagination function (draw switching numbers)
// perform initialization
init();
//$(document).ready(function(){
$("#pagination").jPaginator({
nbPages:numero,
marginPx:5,
nbVisible:8,
overBtnLeft:'#over_backward',
overBtnRight:'#over_forward',
maxBtnLeft:'#max_backward',
maxBtnRight:'#max_forward',
onPageClicked: function(a,num) {
showPage(num);
}
});
//});
}
});
})(jQuery);
问题:我怎样才能使浏览器记住最后显示的页面在一个选项卡,而从一个选项卡传递到另一个。例如,如果tab1中显示的最后一个页面是page5,在单击另一个选项卡然后返回tab1之后,我如何看到tab1的page5 ?
谢谢你的时间。
因为您使用AJAX加载每个选项卡,所以它会丢失所有状态信息。在我看来,您有以下选项:
-
不要用AJAX加载标签页。这将意味着页面加载时间更长,但更换选项卡之间的等待时间更短。
-
IDEAL:更改选项卡更改功能以检查内容是否已加载。
-
将页面状态保存为变量,并在每次加载选项卡时将页面更改为变量值
相关文章:
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 如何通过引用var Using DataTables来进行分页或排序
- 使用CSS或JavaScript计算分页符的数量
- DataTables-创建自定义分页样式(加载更多样式)
- 使用ajax的服务器端分页&jQuery
- 分页:如何用AJAX加载第一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 不带jquery的全屏分页
- 更改组合框分页后,getValue和getRawValue返回相同的值
- jQuery简单分页
- 使用jQuery在表中分页
- jQuery:根据select选项中的每页项目进行分页
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- 如何在分页期间链接回特定的jquery ui选项卡
- 需要jquery&litte-html-css改进猫头鹰幻灯片与选项卡导航(分页)
- 在 JavaScript 选项卡中显示分页
- jQuery循环插件,自定义分页选项卡
- 选择列表项分页内的默认选项卡
- 引导分页和选项卡元素
- 如何让浏览器记住通过ajax和jquery生成的多选项卡分页内容中显示的最后一个页面