JQuery Mobile使用Listomatic插件对列表视图进行分页

JQuery Mobile using Listomatic Plugin for paginating a listview

本文关键字：视图 分页 列表 Mobile 使用 Listomatic 插件 JQuery      更新时间：2023-09-26

当用户点击进入详细信息页面时，如何分配分页页面的先前"状态"，例如，如果用户加载列表视图（项目 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 -->

一种解决方案是使用 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"];

希望这有帮助。

相关文章：