0

相当简单的概念。我有一个分页数据源，它将内容以 15 个块的形式提供给砌体墙。我想在那里粘贴一个“加载更多”按钮。

我是否需要加载整个 DS 并消除分页，然后用 jQ 屏蔽它？听起来它可能会变得迟钝？

如何连接此功能？仅在请求时输入 XML 输出？我试图简单地从砌体文档中获取一个现有的附加按钮，但我的代码使它作为页面“NaN”的链接工作......我并没有真正混合 XSL 和 jQuery 太多。不知道从哪里开始.. 下面是我的按钮代码。

            <a href="{$root}/?page={/homepage-aritcles/pagination/@current-page + 1}">  <button id="append-button">++++ LOAD MORE POSTS ++++</button>   </a>

这是相对的js：

function getItemElement() {
  var elem = document.createElement('div');

  elem.className = 'item ' ;
    return elem;
}

$(function(){

      var $container = $('.post.content'),
          $boxes = $container.find('.item'),
          firstTime = true;

      $(window).smartresize(function(){

        var containerWidth = $container.width(),
            colWidth = Math.floor( containerWidth / 3 ),
            applyStyleFnName = firstTime ? 'css' : 'animate';


        $boxes.each(function(){
          var $this = $(this),
              cols = $this.data('cols'),
              boxWidth = Math.floor( colWidth * cols );

          $this[ 'css' ]({ width: boxWidth }, { queue: false });
        });


  $('#append-button').on( 'click', function() {
    var elems = [ getItemElement() ];
    $container.append( elems ).masonry( 'appended', elems );
  });
4

1 回答 1

1

您可以通过将“start at page”参数设置为变量来从数据源请求结果的第二页。

因此，当您为锚点编写“/?page=”时，您可以将数据源的“开始于页面”设置为“{$url-page}”。这可以在 Symphony UI 中或通过编辑数据源 PHP 文件来完成。

然后，您可以使用来自 jQuery 的 ajax 请求加载此页面。

Symphony 页面中的所有 GET 参数都可以作为以“url-”开头的变量进行访问。

这是一个基本示例，您需要将其扩展为加载状态和检测是否没有更多页面要加载。

按钮 XSL（确保它在 ajax 页面容器之外）：

<a class="js-loadmore" data-current-page="{pagination/@current-page}" href="/?page={pagination/@current-page + 1}">Load More</a>

第 1 页标记：

<div class="ajax-page">
  <p>I'm on page 1<p>
</div>

第 2 页标记：

<div class="ajax-page">
  <p>I'm on page 2</p>
</div>

JS：

$('.js-loadmore').click(function(e) {
  e.preventDefault();
  var $btn = $(this),
      page = $btn.data('current-page') + 1,
      $dest = $('.ajax-page');

  $.ajax({
    url: '/?page=' + page,
    success: function(data) {

      // Find elements inside the container on the 2nd page and put them in the first page
      $(data).find('.ajax-page').children().appendTo($dest);

      // Update counter so subsequent clicks loads the next page
      $btn.data('current-page', page);

    }
  });

});

点击后...

<div class="ajax-page">
  <p>I'm on page 1<p>
  <p>I'm on page 2<p>
</div>
于 2014-04-29T11:28:42.853 回答