0

我正在尝试使用 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);
});
4

1 回答 1

0

如果查询的结果很大怎么办?它将非常缓慢地加载数据。在用户单击下一个或第二个数字时使用 ajax 加载数据怎么样?

于 2013-03-29T05:57:39.953 回答