客戶端分頁

我有N個html元素。是否可以用jQuery隱藏N-10底部元素，然後創建一個「加載更多」按鈕來顯示另外10個元素？客戶端分頁

我的意思是當頁面加載時，只有10個第一個元素應該可見，當我點擊「加載更多」時，20個第一個元素是可見的，而當我再次點擊時，30個第一個元素是可見的，等

會是像

$('li').slice(-($('li').length - 10)).hide();

然後

var num_visible = 10; 
$('#loadMore').click(function() { 
    $('li').slice(num_visible, num_visible + 10).show(); 
    num_visible += 10; 
});

來源

2017-02-21 Jamgreen

我能想到的唯一的問題是，如果你有一個大的數據集（或要動態加載，所以你不必刷新整個頁面是否添加項目），然後你真的想用服務器端分頁。 – imtheman

但我只有400個項目。那太多了？ – Jamgreen

這取決於你，你必須測試它。 – imtheman

您可能需要添加一些進一步的驗證 - 這正說明了通用I dea - 針對您的特定用例，但會像這樣的工作？

var currShowing = 10; 
changeShowing() 
function changeShowing() { 
$('div').each(function(index, value) { 
    if (index < currShowing - 1) { 
     $(this).show(); 
    } else { 
     $(this).hide(); 
    } 
    }) 
} 

function showMore() { 
    currShowing += 10; 
    changeShowing(); 
}

http://codepen.io/mwvanmeurs/pen/VPoORq

來源

2017-02-21 23:37:30 Pytth

回答

相關問題