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

时间:2014-09-22 19:32:12

标签: javascript php jquery ajax

我想创建一个简单的#34;加载更多"按钮,但我有一个三列设计,使它有点复杂,因为我只想将项目加载到他们的父元素。我在其他网站上使用了无限的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 / AJAX,那么加载更多的链接就像任何其他php-mysql分页一样(例如在joomla博客布局上),返回和打印的数据与html相同上面的代码。

我希望我的问题很明确。

1 个答案:

答案 0 :(得分:0)

如果您的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");
}