jQuery实现滚动加载信息

1.添加scrollpagination.js

/*
 **    Anderson Ferminiano
 **    contato@andersonferminiano.com -- feel free to contact me for bugs or new implementations.
 **    jQuery ScrollPagination
 **    28th/March/2011
 **    http://andersonferminiano.com/jqueryscrollpagination/
 **    You may use this script for free, but keep my credits.
 **    Thank you.
 */
(function ($) {
    $.fn.scrollPagination = function (options) {
        var opts = $.extend($.fn.scrollPagination.defaults, options);
        var target = opts.scrollTarget;
        if (target == null) {
            target = obj;
        }
        opts.scrollTarget = target;
        return this.each(function () {
            $.fn.scrollPagination.init($(this), opts);
        });
    };
    $.fn.stopScrollPagination = function () {
        return this.each(function () {
            $(this).attr('scrollPagination', 'disabled');
        });
    };
    $.fn.scrollPagination.loadContent = function (obj, opts) {
        var target = opts.scrollTarget;
        var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
        if (mayLoadContent) {
            if (opts.beforeLoad != null) {
                opts.beforeLoad();
            }
            if ($(obj).attr('data-status') == 'loading') {
                return;
            }
            $(obj).attr('data-status', 'loading');
            $(obj).children().attr('rel', 'loaded');
            if (opts.loadContentData != null) {
                opts.contentData = $.extend(opts.contentData, opts.loadContentData());
            }
            $.ajax({
                type: 'POST',
                url: opts.contentPage,
                data: opts.contentData,
                success: function (data) {
                    $(obj).append(data);
                    var objectsRendered = $(obj).children('[rel!=loaded]');
                    if (opts.afterLoad != null) {
                        opts.afterLoad(objectsRendered);
                    }
                    if (data == '') {
                        if (opts.afterLoadAll != null) {
                            opts.afterLoadAll();
                        }
                        $(obj).stopScrollPagination();
                    }
                },
                complete: function () {
                    $(obj).attr('data-status', '');
                },
                dataType: 'html'
            });
        }
    };
    $.fn.scrollPagination.init = function (obj, opts) {
        var target = opts.scrollTarget;
        $(obj).attr('scrollPagination', 'enabled');
        $(target).scroll(function (event) {
            if ($(obj).attr('scrollPagination') == 'enabled') {
                $.fn.scrollPagination.loadContent(obj, opts);
            }
            else {
                event.stopPropagation();
            }
        });
        $.fn.scrollPagination.loadContent(obj, opts);
    };
    $.fn.scrollPagination.defaults = {
        'contentPage': null,
        'contentData': {},
        'loadContentData': null,
        'beforeLoad': null,
        'afterLoad': null,
        'afterLoadAll': null,
        'scrollTarget': null,
        'heightOffset': 0
    };
})(jQuery);

2.调用

加载页面：

<div class="row" id="pagination_container"></div>
    <div id="pagination_loading" style="display: none;">加载中...</div>
    <div id="pagination_nomore" style="display: none;">已经全部加载</div>

调用js:

<script type="text/javascript">
        $(function () {
            $('#pagination_container').scrollPagination({
                'contentPage': '/order/ajax_diliver_list',
                'contentData': {status: '', pnt: '', pnm:<?= $pageRows;?>},
                'scrollTarget': $(window),
                'heightOffset': 20,
                'loadContentData': function () {
                    var pagePoint = $('#pagination_container').children().children().children().last().children('.panel-success').html();
                    return {pnt: pagePoint}
                },
                'beforeLoad': function () {
                    $('#pagination_loading').show();
                },
                'afterLoad': function (elementsLoaded) {
                    $('#pagination_loading').hide();
                    if ($('#pagination_container').children().size() > 10000) {
                        stopLoad();
                    }
                },
                'afterLoadAll': function () {
                    stopLoad();
                }
            });
            function stopLoad() {
                $('#pagination_container').stopScrollPagination();//停止加载
                $('#pagination_nomore').fadeIn().delay(3000).fadeOut();
            };


        });


    </script>

服务器端：

public function ajaxDeliverViewAction()
    {
        $pagePoint = $this->getParam('pnt', 'String', '');
        $status    = $this->getParam('status', 'String', '');
        $dayTime   = $this->getParam('day', 'String', '');
        $pageSize  = Serve_Env_Define::PAGE_SIZE;

       $search['serve_user_id'] = $this->user->id;

        $orderARs = System_Module_Serve::getOrderListBySearch($search, $pageSize, $pagePoint);$this->render('ajaxDeliverView', compact('orderARs', 'addressLists', 'status'));
    }

public static function getOrderListBySearch($search, $limit, $pagePoint)
    {
        $da = self::combineConditions($search);

        $da->sort('id', 'DESC');

        if (!empty($pagePoint)) {
            $da->filterByOp('id', '<', $pagePoint);
        }

        $orderARs = $da->limit($limit)->find();

        if (empty($orderARs)) {
            return array();
        }
return $orderARs;
    }

private static function combineConditions($search)
    {
        $da = System_Model_ServeOrder::dataAccess();
        foreach ($search as $field => $value) {
            if ($field == 'startDate') {
                $da->filterByOp('created', '>=', strtotime($value . " 00:00:00"));
            } elseif ($field == 'endDate') {
                $da->filterByOp('created', '<=', strtotime($value . " 23:59:59"));
            } elseif ($field == 'phone') {
                $memberAR = System_Module_Passport::getInfoByPhone($value);
                if (empty($memberAR)) {
                    $da->filter('member_id', 0);
                } else {
                    $da->filter('member_id', $memberAR->id);
                }
            } elseif ($field == 'requestTime') {
                $da->filterByOp('updated', '>=', $search['requestTime']);
            } else {
                $da->filter($field, $value);
            }
        }

        return $da;
    }

public function filterByOp($name, $op, $value)
    {
        $this->filterNames[]  = $name;
        $this->filterOps[]    = $op;
        $this->filterValues[] = $value;

        return $this;
    }

注：scrollpagination.js代码为全的，调用的js代码可以修改您要修改的请求路径，和

'contentData': {status: '', pnt: '', pnm:<?= $pageRows;?>},里的参数，
另外，

'loadContentData': function () {
                    var pagePoint = $('#pagination_container').children().children().children().last().children('.panel-success').html();
                    return {pnt: pagePoint}
                },
pagePoint是要找到根据您自身页面当中找到最后一个内容模块,否则会有重复信息加载。

转载于:https://www.cnblogs.com/silverwangx/p/5010466.html