顶部和底部分页jQuery

Question

我已经为演示目的制作了一个 jsfiddle：https://jsfiddle.net/b8gmqx9p/2/

这是 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 index = 0; index < numberOfPaginationLinks; index++)
       {
            paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>");
       }

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

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

            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');

       });

   } }(jQuery));  (function($){

$(document).ready(function(){

    $(".pagination").customPaginate({

        itemsToPaginate : ".pagination_show"

    });

}); })(jQuery)

我希望顶部和底部都有导航栏，并且我希望这两个元素都显示活动页面。目前，当您最初打开站点（或查看演示）时，它不会显示第一页处于活动状态。当您单击“2”时，它会变成应有的黄色。但是我希望在您最初打开网站时将课程设置为“1”。我想同时显示底部和顶部导航。

其次，

我想在导航栏上添加一个“上一个”和“下一个”按钮，它应该包含一个功能来移动到下一个（例如从第 2 页到第 3 页）或移动到上一页（例如从第 3 页到第 2 页）。

感谢您的帮助！我只是不擅长 jQuery...

Answer 1

这就是你想要的-

( 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)

ul.products_erweitert li {
width: 221px;
margin-right: 0.5%;
margin-left: 0.5%;
margin-bottom: 0.4%;
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
}

.asa2_uhrenshop_main_container {
    border: 1px solid #fff;
    padding: 10px 10px 10px 10px; margin-bottom: 8px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height:350px;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    -moz-box-shadow:    0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}

.asa2_uhrenshop_main_container:hover {
    border: 1px solid #db9f1e;
    -moz-border-radius: 5px;
    border-radius: 5px;
    transition: all 0.5s;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.also_a_test {
    background-color:#00CD00;
}

.best_test {
    background-color:#8A2BE2
}

.pagination li
{ display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #000;
  border: 1px solid #db9f1e !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
margin-right: 3px;
}

.pagination li:hover
{
    background: #db9f1e;
  border-color: #db9f1e !important;
  color: #fff !important;
transition: all 0.5s;
}

.pagination_active {
background: #db9f1e;
border-color: #db9f1e !important;
color: #fff !important;
}

.pagination ul
{
    border: 0px;
    padding: 0px;
}

.pagination {
margin: 0 auto;
  display: table;
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="pagination"></div>
<ul class="products_erweitert"><li class="pagination_show"><div class="asa2_uhrenshop_main_container"> This is a test</div>
        </li>
         
<li class="pagination_show">        
<div class="asa2_uhrenshop_main_container"> This is a test</div>
        </li>
    
<li class="pagination_show">        
<div class="asa2_uhrenshop_main_container"> This is a test</div>
        </li>

<li class="pagination_show">        
<div class="asa2_uhrenshop_main_container also_a_test"> This is also a test</div>
        </li>
    <li class="pagination_show">        
<div class="asa2_uhrenshop_main_container also_a_test"> This is also a test</div>
        </li>
    <li class="pagination_show">        
<div class="asa2_uhrenshop_main_container also_a_test"> This is also a test</div>
        </li>
    <li class="pagination_show">        
<div class="asa2_uhrenshop_main_container best_test"> This is the best test</div>
        </li>
    <li class="pagination_show">        
<div class="asa2_uhrenshop_main_container best_test"> This is the best test</div>
        </li>
    <li class="pagination_show">        
<div class="asa2_uhrenshop_main_container best_test"> This is the best test</div>
        </li>

</ul><div class="pagination"></div>

Answer 2

这个例子会帮助你http://web.enavu.com/tutorials/making-a-jquery-pagination-system/。你可以看到demo并可以下载它

如果要设置选择的第一页，则必须使用

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

In the line 20 of your js