使用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>