pagination mauvais progrès des nombres

Question

Voici mon code:

var pages = Math.ceil(allItems/itemsPerPage); 
var pagesArray = []; 
for(var i = 0; i < pages; i++){ 
    pagesArray.push(i); 
} 
var show = 3; 
var offset = pageCounter + show; 
var showPages = pagesArray.slice(pageCounter, offset); 
for(var h = 0; h < showPages.length; h++){ 
    if(pageCounter == showPages[h]){ 
     selectedPageClass = 'selected'; 
    }else{ 
     selectedPageClass = ''; 
    } 
    $(".pagination").append("<a href='#' class='" + selectedPageClass +"'>" + showPages[h] + "</a>"); 
} 

Mon problème est maintenant: si j'ai ce tableau ["1","2","3","4","5"]

Première étape quand je suis à la page « 0 » il devrait être:

1(selected) 2 3

cela fonctionne. mais que ça va comme ça:

2(selected) 3 4

3(selected) 4 5

4(selected) 5

5(selected)

Mais ce que je veux est ceci:

1(selected) 2 3

2(selected) 3 4

3(selected) 4 5

3 4(selected) 5

3 4 5(selected)

Answer 1

http://codepen.io/anon/pen/JbBYva

Vous pouvez mettre à jour les variables sur le dessus, PageCounter est base 0.

//editable variables 
var pages = 5; 
var pageCounter = 0; 
var show = 3; 

//calculation 
var pagesArray = []; 
for(var i = 1; i <= pages; i++){ 
    pagesArray.push(i); 
} 
var offset = pageCounter + show; 
var showPages = pagesArray.slice(Math.min(pages - show, pageCounter), offset); 
for(var h = 0; h < showPages.length; h++){ 
    if(pageCounter + 1 == showPages[h]){ 
     selectedPageClass = 'selected'; 
    }else{ 
     selectedPageClass = ''; 
    } 
    $(".pagination").append("<a href='#' class='" + selectedPageClass +"'>" + showPages[h] + "</a>"); 
} 

Answer 2

Vous devriez faire votre showPages comme ceci:

var showPages = pagesArray.slice(Math.min(pageCounter, pages- show), offset); 

Voir la démo ci-dessous:

var pages = 10, 
 
    pageCounter = 0; 
 
var pagesArray = []; 
 
for (var i = 0; i < pages; i++) { 
 
    pagesArray.push(i); 
 
} 
 
var show = 3; 
 

 
function paginate() { 
 
    $(".pagination").empty(); 
 
    var offset = pageCounter + show; 
 
    var showPages = pagesArray.slice(Math.min(pageCounter, pages - show), offset); 
 

 
    for (var h = 0; h < showPages.length; h++) { 
 
    if (pageCounter == showPages[h]) { 
 
     selectedPageClass = 'selected'; 
 
    } else { 
 
     selectedPageClass = ''; 
 
    } 
 
    $(".pagination").append("<a href='#' class='" + selectedPageClass + "'>" + showPages[h] + "</a>"); 
 
    } 
 
} 
 

 
// initialize 
 
paginate(); 
 

 
// turn pages 
 
$('#counter').click(function() { 
 
    if (pageCounter >= pages) 
 
    return; 
 
    pageCounter++; 
 
    paginate(); 
 
}); 
 

 
// restart pagination 
 
$('#restart').click(function() { 
 
    pageCounter = 0; 
 
    paginate(); 
 
});

.selected { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pagination"></div> 
 
<button id="counter">Turn a page</button> 
 
<button id="restart">Restart</button>