Jquery を使用して、Web サイトで基本的なページネーションを作成しようとしています。（コードは以下です）。すべてが完全に正常に機能していますが、クエリからすべての結果をロードし、「スライス」関数を使用してスライスするだけであることに気付きました。これは基本的に、余分な結果をバックグラウンドで隠すだけです。すべての結果をロードするのではなく、4 つだけをロードしたい。ユーザーが次または 2 番目の数字をクリックしたときに、次の 4 つの結果をロードしたいそれらをアップします。
$(document).ready(function(){
//Problem about this is that it loads all the images and just slice them up.
//Declaring variables
var page = 1;
var per_page = 4;
var items = $('.row').length;
var page_last = Math.ceil(items/per_page);
//Set Page
function setPage(page){
$('.row').slice(0, page * per_page).hide();
$('.row').slice(page * per_page - per_page, page * per_page).show();
$('.row').slice(page * per_page).hide();
}
//Next Button
$('.next').click(function(){
if(page < page_last){
$('.links.link_' + page).attr('href', '#').css('color', 'white');
page++;
$('.links.link_' + page).removeAttr('href').css('color', 'gray');
setPage(page);
}
});
//Previous Button
$('.prev').click(function(){
if(page > 1){
$('.links.link_' + page).attr('href', '#').css('color', 'white');
page--;
$('.links.link_' + page).removeAttr('href').css('color', 'gray');
setPage(page);
}
});
//Generate Page Links
for( x = 1; x <= page_last; x++){
if(x == 1){
$('.pages').append(' <a style="color:gray" class="links link_' + x + '">' + x + '</a>');
}else{
$('.pages').append(' <a href="#" class="links link_' + x + '">' + x + '</a>');
}
}
//Links Functions
$('.links').click(function(){
$('.links.link_' + page).attr('href', '#').css('color', 'white');
page = $(this).html();
$('.links.link_' + page).removeAttr('href').css('color', 'gray');
setPage(page);
});
$('.next, .prev').click(function(event){
event.preventDefault();
});
setPage(1);
});