0

当用户单击详细信息页面时，我如何分配分页页面的先前“状态”，例如，如果用户加载列表视图（项目 1-100）然后单击“查看更多”列表视图项目（100-200）然后单击在列表视图中的单个项目详细信息页面上，然后使用后退按钮“返回”。他们如何才能返回到他们最初查看的列表视图项目 100-200 的最后一个数据集，而无需从 1-100 重新开始并再次单击“查看更多”？

详情页返回按钮：

<a href="javascript: window.history.back()" data-role="button"  data-icon="btn-back" data-inline="true" data-theme="a" class="back-button">&nbsp;</a>

列表视图页面：

<div id="artistListPage" data-role="page" class="artists-page">

    <script type="text/javascript"> // listomatic listview layout
    $(document).on("pageinit", function(){
        var serviceURL = "http://localhost/Apps/services/pagination.php";
        var getNumber = function() {
            return $.ajax({
                type: "post",
                beforeSend: function() { $.mobile.loading( 'hide' ) }, //Show spinner
                complete: function() { $.mobile.loading( 'hide' ) }, //Hide spinner
                async: "true",
                dataType: 'json',
                url: serviceURL,
                data: { listomatic: $.mobile.listomatic.prototype.getResults() },
                success: function(data) {
                    if (data && data.artists) {
                        var list = '';
                        $.each(data.artists, function(index, artistVal) {
                            list += '<li class="muralGrid" data-icon="true" data-filtertext="' + artistVal.firstName + '">' +

                                    '<a href="artistdetails.html?id=' + artistVal.id + '">' +

                                    '<img src="pics/sm/' + artistVal.picture + '"/>' +

                                    '<h4>' + artistVal.firstName + ' ' + artistVal.lastName + '</h4>' +
                                    '</li>';
                        }); // end each 
                        $('#artistslistview').append(list).listview("refresh"); //corresponds with ul id
                    } // end if
                } // end success
            }); // end ajax
        }
        $.extend($.mobile.listomatic.prototype.options, {perPage: 50, btnLabel: 'More', refreshContent: 'daily'});
        $.mobile.listomatic.prototype.registerAjaxCall(getNumber);
    });
    </script>

    <script src="js/jquery.mobile.listomatic.js"></script>

        <div data-role="content" id="artistListContent">
    <div class="artistslistviewWrap">            
    <ul id="artistslistview" class"muralGrid" data-role="listview" data-theme="b" data-dividertheme="b" data-filter="true" data-listomatic="true" data-filter-theme="d" data-filter-placeholder="Search Artist Name"></ul> <!-- data-listomatic="true" -->
    </div>
    <div data-role="footer" data-id="tabbar" data-position="fixed" id="myfoot" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <li><a href="index.html" data-icon="tab-home" class="ui-btn-active ui-state-persist">Home</a></li>
            <li><a href="artists.html" class="" data-icon="tab-graffiti">Murals</a></li>
            <li><a href="map.html" data-icon="tab-map">Map</a></li>
            <li><a href="contact.html" class="" data-icon="tab-contact">Contact</a></li>
            <li><a href="sponsor.html" data-transition="fade" data-icon="tab-about">Sponsor</a></li>
        </ul>

    </div><!-- /navbar -->          
    </div><!-- /footer -->
    </div>  <!-- content -->
    </div><!-- page -->
4

1 回答 1

1

一种解决方案是使用 cookie。

尝试以下（未经测试），看看它是否有效。


在主页

在头部添加这个 

if ($.cookie('from') == null || $.cookie('from') == 100) {

$.cookie('from', '0');

}    

 if ($.cookie('from') > 100 ) {

 var from = $.cookie('from');

 $.cookie('from', Number(from) - 100);

}

在这条线之后

success: function(data) {

添加

var from = $.cookie('from');

$.cookie('from', Number(from) + 100);

在你的 PHP 脚本中

删除这一行 

$listOffset = $_REQUEST['listomatic']['listOffset'];

并添加

$listOffset  = $_COOKIE["from"];


希望这可以帮助。

于 2014-03-18T01:50:44.487 回答