我正在尝试使用 Jquery 在我的网站上进行基本分页。（代码如下）。一切工作正常，但我注意到它加载了查询中的所有结果，然后使用“切片”函数对其进行切片。这基本上只是在后台隐藏了额外的结果。我不想加载所有结果，我只想加载其中 4 个，当用户单击下一个或第二个数字时，我想加载接下来的 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);
});