Question

我有以下问题：我想在我的分页中添加上一个和下一个按钮。我创造了一个问题小提琴：https://jsfiddle.net/b8gmqx9p/7/

正如您所看到的，我在内容的顶部和底部都有分页/导航栏。由于我的内容中包含大量元素，因此我希望使用上一个和下一个按钮来建立更轻松的导航。

我们还假设我的导航中有20页，我只想显示五页，就像那样：＆＃39;之前| 1 | 2 | 3 | 4 | 5 |下一个＆＃39;如果您点击第4页，您将获得之前的| 2 | 3 | 4 | 5 | 6 |下一个＆＃39 ;.不幸的是，我不知道如何确定这一点。

所以我非常感谢您对这两个问题的意见。非常感谢提前！

这是jQuery代码：

( function($) {

                $.fn.customPaginate = function(options) {
                    var paginationContainer = this;
                    var itemsToPaginate;

                    var defaults = {

                        itemsPerPage : 3

                    };

                    var settings = {};

                    $.extend(settings, defaults, options);

                    var itemsPerPage = settings.itemsPerPage;

                    itemsToPaginate = $(settings.itemsToPaginate);
                    var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length / itemsPerPage));


                    $("<ul></ul>").prependTo(paginationContainer);

                    for(var pagerEle=0; pagerEle<paginationContainer.length; pagerEle++){                            
                        for (var index = 0; index < numberOfPaginationLinks; index++) {                            
                            paginationContainer.eq(pagerEle).find("ul").append("<li>" + (index + 1) + "</li>");
                            if(index == 0){
                                paginationContainer.eq(pagerEle).find("ul li").eq(0).addClass('pagination_active');
                            }
                        }
                    }



                    itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide();

                    paginationContainer.find("ul li").on('click', function(e) {

                        var linkNumber = $(this).text();

                        var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber - 1) * itemsPerPage) + ")");
                        $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")"));
                        itemsToHide.hide();

                        var itemsToShow = itemsToPaginate.not(itemsToHide);
                        itemsToShow.show("300");

                        $(this).addClass('pagination_active').siblings().removeClass('pagination_active');
                        pagerCurIndex = $(this).index();

                        for(var pagerEle=0; pagerEle<paginationContainer.length; pagerEle++){                            
                            paginationContainer.eq(pagerEle).find("ul li").eq(pagerCurIndex).addClass('pagination_active').siblings().removeClass('pagination_active');
                        }


                    });

                }
            }(jQuery));

        (function($) {

            $(document).ready(function() {

                $(".pagination").customPaginate({

                    itemsToPaginate : ".pagination_show"

                });

            });

        })(jQuery)

jQuery分页前一个下一个按钮

0 个答案: