PHP JS加载更多,phpcms列表页js实现加载更多效果

先看一下效果：

默认显示6条数据，点击一次加载更多追加显示6条，直到数据全部显示完全，隐藏加载更多按钮。

列表页引入一下文件：

//调用显示更多插件。参数是标准的 jquery 选择符

$.showMore(".showMoreNChildren,.clearfix");

其中核心js文件jquery.showMore.js// JavaScript Document

(function () {

var showMoreNChildren = function ($children, n) {

//显示某jquery元素下的前n个隐藏的子元素

var $hiddenChildren = $children.filter(":hidden");

var cnt = $hiddenChildren.length;

for (var i = 0; i 

$hiddenChildren.eq(i).show();

}

return cnt - n;//返回还剩余的隐藏子元素的数量

}

jQuery.showMore = function (selector) {

if (selector == undefined) { selector = ".showMoreNChildren" }

//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为

$(selector).each(function () {

var pagesize = $(this).attr("pagesize") || 10;

var $children = $(this).children();

if ($children.length > pagesize) {

for (var i = pagesize; i 

$children.eq(i).hide();

}

$("

加载更多

").insertAfter($(this)).click(function () {

if (showMoreNChildren($children, pagesize) <= 0) {

//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”

$(this).hide();

};

});

}

});

}

})();

原理：

页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击加载更多，继续追加几条数据；直到没有更多数据了，就会隐藏加载更多按钮。