0

ユーザーがクリックして詳細ページに移動したときに、ページ分割されたページの以前の「状態」を割り当てるにはどうすればよいですか。リストビューの個々のアイテムの詳細ページで、戻るボタンを使用して「戻る」。最初に表示していたリストビュー アイテム 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

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 に答える