Question

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

Answer 1

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

使用Jquery的基本分页问题

1 个答案: