一段滾動(dòng)到頁面底部自動(dòng)加載更多數(shù)據(jù)的js代碼，需要jquery.js 、 jquey.tmpl.js 支持

var Data = {

PageCount: 1,

PageSize: 30,

IsCompleted: false,

init: function(rows) { //初始化，載入第一頁數(shù)據(jù)

$(".list-item").detach();

Data.IsCompleted = false;

Data.load(1, rows);

},

setPage: function() { //數(shù)據(jù)載入成功，設(shè)置下一頁索引

var $page = $("#PageIndex");

var index = parseInt($page.val()) + 1;

$page.val(index);

},

scroll: function(page, rows) { //滾動(dòng)到底部加載數(shù)據(jù)

if (Data.IsCompleted) {

return false;

}

var top = $(window).scrollTop();

var win = $(window).height();

var doc = $(document).height();

if ((top + win) >= doc) {

Data.load(page, rows);

}

},

load: function(page, rows) { //載入數(shù)據(jù)方法

$("#PageIndex").val(page);

var chkSubject = $("#chkSubject").prop("checked");

var chkContent = $("#chkContent").prop("checked");

var logical = $('input:radio[name="rbtnLogical"]:checked').val();

var selectedTypeId = $("#hfdselectedId").val();

var $msg = $('.load-btn');

$msg.removeClass('load-more').text('正在載入數(shù)據(jù)...');

$.ajax({

url: "?pageindex=" + page +

"&pagesize=" + rows +

"&keywords=" + encodeURI($("#txtKeyWords").val()) +

"&chkSubject=" + chkSubject +

"&chkContent=" + chkContent +

"&logical=" + logical +

"&typeid=" + selectedTypeId +

"&t=" + (new Date().getTime()),

type: "POST",

success: function(json) {

Data.PageCount = json.PageCount;

var data = json.List;

if (data != null && data.length > 0) {

Data.append(data);

if (Data.PageCount == page) {

Data.IsCompleted = true;

$msg.removeClass('load-more').text('已加載全部數(shù)據(jù)！');

return true;

}

Data.setPage();

$msg.addClass('load-more').text('查看更多');

return true;

}

$msg.removeClass('load-more').text('已加載全部數(shù)據(jù)！');

return false;

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$msg.removeClass('load-more').text('數(shù)據(jù)加載失敗！點(diǎn)擊重試。');

alert(errorThrown + ":" + textStatus);

}

});

return false;

},

append: function(json) { //構(gòu)造html，并填充

var $container = $('.table');

$.each(json, function(i) {

var html = $("#list-item-template").tmpl(json[i]);

html.appendTo($container);

});

}

};

var $page = $("#PageIndex"); //頁索引

//初始化

Data.init(Data.PageSize);

//滾動(dòng)加載

$(window).scroll(function () {

Data.scroll($page.val(), Data.PageSize);

});

//手動(dòng)加載

$(".load-more").bind("click", function () {

Data.load($page.val(), Data.PageSize);

});

//查詢

$("#btnSearch").bind("click", function () {

Data.init(Data.PageSize);

});

總結(jié)

以上是生活随笔為你收集整理的html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。