Разбиение на страницы в изотопе

Question

Я использую SharePoint. В веб-части мне удается добавить поведение изотопа для набора элементов, которые я получаю через код. Я назвал this link, чтобы почувствовать поведение изотопов.

// init Isotope 
    var $container = $('.isotope').isotope({ 
    itemSelector: '.element-item', 
    layoutMode: 'fitRows', 
    filter: function() { 
     return qsRegex ? $(this).text().match(qsRegex) : true; 
    } 
    }); 

Могу ли я узнать, доступен ли нумерация страниц в изотопам

Answer 1

Вы видели http://codepen.io/Igorxp5/pen/ojJLQE?

$(document).ready(function() { 

    var itemSelector = '.grid-item'; 

    var $container = $('#container').isotope({ 
     itemSelector: itemSelector, 
     masonry: { 
      columnWidth: itemSelector, 
      isFitWidth: true 
     } 
    }); 

    //Ascending order 
    var responsiveIsotope = [ 
     [480, 4], 
     [720, 6] 
    ]; 

    var itemsPerPageDefault = 10; 
    var itemsPerPage = defineItemsPerPage(); 
    var currentNumberPages = 1; 
    var currentPage = 1; 
    var currentFilter = '*'; 
    var filterAtribute = 'data-filter'; 
    var pageAtribute = 'data-page'; 
    var pagerClass = 'isotope-pager'; 

    function changeFilter(selector) { 
     $container.isotope({ 
      filter: selector 
     }); 
    } 


    function goToPage(n) { 
     currentPage = n; 

     var selector = itemSelector; 
      selector += (currentFilter != '*') ? '['+filterAtribute+'="'+currentFilter+'"]' : ''; 
      selector += '['+pageAtribute+'="'+currentPage+'"]'; 

     changeFilter(selector); 
    } 

    function defineItemsPerPage() { 
     var pages = itemsPerPageDefault; 

     for(var i = 0; i < responsiveIsotope.length; i++) { 
      if($(window).width() <= responsiveIsotope[i][0]) { 
       pages = responsiveIsotope[i][1]; 
       break; 
      } 



     } 

     return pages; 
    } 

    function setPagination() { 

     var SettingsPagesOnItems = function(){ 

      var itemsLength = $container.children(itemSelector).length; 

      var pages = Math.ceil(itemsLength/itemsPerPage); 
      var item = 1; 
      var page = 1; 
      var selector = itemSelector; 
       selector += (currentFilter != '*') ? '['+filterAtribute+'="'+currentFilter+'"]' : ''; 

      $container.children(selector).each(function(){ 
       if(item > itemsPerPage) { 
        page++; 
        item = 1; 
       } 
       $(this).attr(pageAtribute, page); 
       item++; 
      }); 

      currentNumberPages = page; 

     }(); 

     var CreatePagers = function() { 

      var $isotopePager = ($('.'+pagerClass).length == 0) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass); 

      $isotopePager.html(''); 

      for(var i = 0; i < currentNumberPages; i++) { 
       var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAtribute+'="'+(i+1)+'"></a>'); 
        $pager.html(i+1); 

        $pager.click(function(){ 
         var page = $(this).eq(0).attr(pageAtribute); 
         goToPage(page); 
        }); 

       $pager.appendTo($isotopePager); 
      } 

      $container.after($isotopePager); 

     }(); 

    } 

    setPagination(); 
    goToPage(1); 

    //Adicionando Event de Click para as categorias 
    $('.filters a').click(function(){ 
     var filter = $(this).attr(filterAtribute); 
     currentFilter = filter; 

     setPagination(); 
     goToPage(1); 


    }); 

    //Evento Responsivo 
    $(window).resize(function(){ 
     itemsPerPage = defineItemsPerPage(); 
     setPagination(); 
     goToPage(1); 
    }); 
});