使用XSLT加載更多內容嗎？

Question

相當簡單的概念。 我有一個分頁的數據源，該數據源以15的塊的形式將內容饋送到砌體牆。我要在此處粘貼“加載更多”按鈕。

我是否需要加載整個DS並消除分頁，然后僅使用jQ對其進行掩蓋？ 聽起來可能會變得遲鈍？

如何連接此功能？ 僅在請求時提供XML輸出？ 我短暫地嘗試從砌體文檔中獲取一個現有的Append按鈕，但是我的代碼使它可以作為指向頁面“ 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 );
  });

Answer 1

通過將“起始於頁面”參數設置為變量，可以從數據源中請求結果的第二頁。

因此，當您為錨寫“ /？page =”時，可以將數據源的“起始於頁面”設置為“ {$ url-page}”。 這可以在Symphony UI中完成，也可以通過編輯數據源PHP文件來完成。

然后，您可以使用jQuery的ajax請求加載此頁面。

所有GET參數都可以在Symphony頁面中作為以“ 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>