快速浏览更多在线 Demo
想查看源代码，可以自行F12，或在github中直接查看源码，或者欢迎直接留言。
/****
desc : 分页异步获取列表数据，页面向上滚动时候加载前面页码，向下滚动时加载后面页码
ajaxdata_url ajax异步的URL 如data.php
page_val_name ajax异步的URL中的页码参数名 如pageno
page_no 初始加载页码，默认1 [如2,则与前面两参数结合为data.php?pageno=2]
is_lazyload 是否开启懒加载
page_count 总页数
empty_msg 没有数据的时候提示（可传输图片）
ending_msg 最大页码显示提示
***/
$.fn.list_data = function (options) {
//参数
var This = $(this);
var flag = false;//flag为false时为初次加载，防止不断加载
var defaults = {
ajaxdata_url: '',
page_val_name: 'current',
page_no: 1,
page_count: '',
is_lazyload: true,
loading_msg: '加载中...',
empty_msg: '没有相关数据！',
ending_msg: '没有更多数据了!'
};
var opt = $.extend(defaults, options) //没有数据的提示语
if (opt.page_count <= 0) {
This.html("<div class='ui-no-msg'>" + opt.empty_msg + "</div>");
return true;
} //获取页码，暂时不会用到
var get_return_page = function () {
/*var url = location.href;
var page = '';
if (url.indexOf("#") > 0) {
var arr = url.split("#");
var pagestr = arr[1];
if (pagestr.indexOf("_") > 0) {
var arr2 = pagestr.split("_");
var page = arr2[0];
}
}
if (page == '' || page == undefined) {
return 1;
} else {
return page;
}*/
return opt.page_no;
} //基础参数
var page = get_return_page() * 1;
var page_up = page;
var page_down = page; //异步加载数据
var loadmore = function (page, pos) {
var loading = "<div class='ajax-loading'>" + opt.loading_msg + "</div>";
$.ajax({
type: "GET",
url: opt.ajaxdata_url + "&" + opt.page_val_name + "=" + page,
beforeSend: function () {
$(".ajax-loading").remove();
$(".ui-no-msg").remove();
if (pos == 'before') {
$(loading).insertBefore(This);
} else {
$(loading).insertAfter(This);
}
$(".ajax-loading").show();
flag = true;
},
dataType: "html",
error: function () {
//This.html("<div class='ui-no-msg'>数据异常，请刷新重试！</div>");
$("<div class='ui-no-msg'>数据异常，请刷新重试！</div>").appendTo(This);
$(".ajax-loading").remove();
},
success: function (content) {
flag = false;
content = $.parseHTML(content);
if (pos == 'before') {
$(content).prependTo(This);
} else {
$(content).appendTo(This);
}
$(".ajax-loading").remove();
$(".ui-no-msg").remove(); //是否开启懒加载
if (opt.is_lazyload == true) {
lazyLoadImgs(This);
}
} });
} //懒加载
function lazyLoadImgs(e) {
e.find("img").lazyload({
effect: "show",
event: "sporty"
});
var timeout = setTimeout(function () { e.find("img").trigger("sporty") }, 500);
} //初始加载
if (flag == false) {
loadmore(page, 'after'); $(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height(); //滚动到顶部
if (scrollTop == 0) {
if (page_up > 1) {
page_up--;
loadmore(page_up, 'before');//如不需要向上滚动加载，则注释掉此行
}
} else {
//滚动到底部
if (scrollTop + windowHeight >= (scrollHeight - 200)) {
if (page_down < opt.page_count) {
page_down++;
loadmore(page_down, 'after');
} else {
$(".ajax-ending").remove();
$("<div class='ajax-ending'>" + opt.ending_msg + "</div>").appendTo(This);
$(".ajax-ending").delay(2000).hide();
}
}
}
});
} }
使用方法
$("#obj").list_data({
ajaxdata_url : data.php,
page_count : 100,
page_val_name: 'current_page',
page_no: 2,
});