PHP AJAX分页将项目加载到多个容器中

PHP AJAX pagination load items into multiple containers

本文关键字：加载 AJAX 分页 项目 PHP      更新时间：2023-09-26

我想创建一个简单的"加载更多"按钮，但我有一个三列的设计，这让它有点复杂，因为我只想将项加载到它们的父元素中。我在其他网站上使用了无限ajax滚动，但在这种情况下，它不起作用，或者如果我将要加载的项设置为父元素，它就起作用。

我的html布局如下：

<div id="container">
  <div class="firstcol column">
    <article class="item">Content</article>
    <article class="item">Content</article>
    <article class="item">Content</article>
  </div>
  <div class="secondcol column">
    <article class="item">Content</article>
    <article class="item">Content</article>
    <article class="item">Content</article>
  </div>
  <div class="thirdcol column">
    <article class="item">Content</article>
    <article class="item">Content</article>
    <article class="item">Content</article>
  </div>
</div>
<div class="padination">
  <a class="next" href="http://example.com/?start=10">load more</a>
</div>

因此，如果可能的话，我只想将元素加载到它适当的列中。有解决方案吗？或者我需要加载列div并找到一种使用css的方法来让它看起来好看吗？哦，我几乎忘记了，如果我没有任何JS/AAJAX，那么loadmore链接的工作原理与任何其他php-mysql分页一样（例如，在joomla博客布局上），并且返回和打印的数据与上面的html代码相同。

我希望我的问题很清楚。

如果AJAX调用返回HTML，您可以将其设置到jQuery对象中，然后检索它的特定部分。这是未经测试的，但原则上应该有效：

"success" : function(data) {
    //add articles from first col of return html
    var $html = $(data);
    $html.find("div.firstcol article").appendTo("div#container div.firstcol");
    $html.find("div.secondcol article").appendTo("div#container div.secondcol");
    $html.find("div.thirdcol article").appendTo("div#container div.thirdcol");
}
相关文章：