如何让浏览器记住通过ajax和jquery生成的多选项卡分页内容中显示的最后一个页面

How to make the browser remember the last page shown in multi-tab paginated content generated via ajax and jquery?

本文关键字:分页 选项 最后一个 显示 浏览器 jquery ajax      更新时间:2023-09-26

我有一个选项卡内容。基于下面的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加载每个选项卡,所以它会丢失所有状态信息。在我看来,您有以下选项:

  1. 不要用AJAX加载标签页。这将意味着页面加载时间更长,但更换选项卡之间的等待时间更短。

  2. IDEAL:更改选项卡更改功能以检查内容是否已加载。

  3. 将页面状态保存为变量,并在每次加载选项卡时将页面更改为变量值