您的位置:首页 > Web前端 > JQuery

jQuery实现滚动加载信息

2015-12-01 16:23 701 查看
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是要找到根据您自身页面当中找到最后一个内容模块,否则会有重复信息加载。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: