JQuery Mobile使用Listomatic插件對列表視圖進行分頁

當用戶點擊直至詳細頁面時，我如何分配分頁頁面的先前「狀態」，例如如果用戶加載列表視圖（項目1-100），然後點擊「查看更多」列表視圖項目（100-200），然後點擊列表視圖中的單個項目詳細信息頁面，然後使用後退按鈕「返回」。他們如何返回到他們最初查看的最後一個數據集列表視圖項目100-200，而無需在1-100重新開始並再次單擊「查看更多」？JQuery Mobile使用Listomatic插件對列表視圖進行分頁

詳細信息頁面後退按鈕：

<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 -->

來源

2013-11-04 MatchEdit

一種解決方案是使用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-18 01:50:44 Tasos

JQuery Mobile使用Listomatic插件對列表視圖進行分頁

回答

相關問題