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是要找到根据您自身页面当中找到最后一个内容模块,否则会有重复信息加载。