简单的 jQuery 分页 [英] Simple jQuery Pagination

问题描述

我有一个页面，上面有大约 50 个 div.我想将这些 div 组织成六个一组，这样客户就不会得到信息过载".我为我的问题创建了一个简单的 example/reduced test case.正如您所看到的，有很多 div，我希望它在页面加载时，只有前六个可见，但是当您单击第 2 页或下一页时，接下来的六个显示等等.您所在的页码的类也应该设置为 class="current".

I have a page with about 50 divs on it. I would like to organise these divs into groups of six, so that the client doesn't get 'information overload'. I have created a simple example/reduced test case of my problem. As you can see, there a lots of divs, and I want it so that when the page loads, only the first six are visible, but when you click on page 2 or next, the next six are revealed et cetera. The class of the page number you are on should also be set to have class="current".

到目前为止，我已经尝试过使用 jQuery，但我一直被卡住了！任何帮助将不胜感激！

So far I have tried using jQuery, but I have been getting quite stuck! Any help would be much appreciated!

推荐答案

当一个页面被请求时，隐藏所有内容 div，然后遍历它们并显示那些应该出现在页面"上的:

When a page is requested, hide all content divs, then iterate through them and show those that should appear on the "page":

showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}

http://jsfiddle.net/jfm9y/184/

这篇关于简单的 jQuery 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！