Erstellen Sie benutzerdefinierte Paginierung Logik ohne Jquery-Plugin

Question

Ich bin fest, wie mit meiner benutzerdefinierten Seitennummerierung fortfahren. Im Beispiel habe ich nicht den Inhaltsteil, aber ich weiß, wie man das macht, einfach verstecken und zeigen Sie Basis auf dem angeklickten Index an.

Ich bin, wie aufzuspalten und zu handhaben, das Element in eine bessere UX, wie dies für die Paginierung der UI geteilt ist, nicht wirklich so schwer

http://jsbin.com/qulipamecu/1/edit?html,css,js,output

var html = ''; 
for(var i in item){ 
    html += '<li>' + item[i] + '</li>'; 
    } 

Answer 1

Dazu stecken Je nachdem wie komplex Sie es machen möchten

Als Beispiel habe ich den Code in Ihrem jsbin ohne die Hilfe von jQuery re-implementiert, und fügte eine Funktion namens isPageInRange, diese Funktion wird Überprüfen Sie, ob sich Ihre Seite derzeit in Reichweite befindet, und geben Sie true oder false zurück.

So sind die Hauptlogik Änderungen sind folgende:

for(var i in item){ 
    if (isPageInRange(curPage, i, pageLen, 2, 2)) { 
    html += '<li data-page="' + i + '">' + item[i] + '</li>'; 
    // as we added a page, we reset the separatorAdded 
    separatorAdded = false; 
    } else { 
    if (!separatorAdded) { 
     // only add a separator when it wasn't added before 
     html += '<li class="separator" />'; 
     separatorAdded = true; 
    } 
    } 
} 

Falls die Seite nicht in Reichweite, können Sie fügen Sie einfach einen Separator (wenn noch nicht hinzugefügt -> Sie wollen nicht mehrere Separatoren nächste einander) nimmt an

Die Probe, dass:

• Sie die ersten 2 Seiten immer sichtbar
• Sie haben wollen möchten, sollten die letzten 2 Seiten immer sichtbar
• Sie konfigurieren möchten, wie viele Seiten vor und nach der aktuellen Seite

Für den Rest aktiv sein, habe ich einige kleine Änderungen, zB:

• (aktiv) Auswahl auf Daten-Seite Attribut basiert
• voll div ist anklickbar (und Handler klicken hinzugefügt wird nur das erste Mal)
• voll div ist gerendert sind, wenn die Seiten
ändern

var pageLen = 20; 
 
var curPage = 2; 
 
var item = []; 
 
for(var i = 1; i<=pageLen;i++){ 
 
    item.push(i); 
 
} 
 

 
function isPageInRange(curPage, index, maxPages, pageBefore, pageAfter) { 
 
    if (index <= 1) { 
 
    // first 2 pages 
 
    return true; 
 
    } 
 
    if (index >= maxPages - 2) { 
 
    // last 2 pages 
 
    return true; 
 
    } 
 
    if (index >= curPage - pageBefore && index <= curPage + pageAfter) { 
 
    return true; 
 
    } 
 
} 
 

 
function render(curPage, item, first) { 
 
    var html = '', separatorAdded = false; 
 
    for(var i in item){ 
 
    if (isPageInRange(curPage, i, pageLen, 2, 2)) { 
 
     html += '<li data-page="' + i + '">' + item[i] + '</li>'; 
 
     // as we added a page, we reset the separatorAdded 
 
     separatorAdded = false; 
 
    } else { 
 
     if (!separatorAdded) { 
 
     // only add a separator when it wasn't added before 
 
     html += '<li class="separator" />'; 
 
     separatorAdded = true; 
 
     } 
 
    } 
 
    } 
 
    
 
    var holder = document.querySelector('#holder'); 
 
    holder.innerHTML = html; 
 
    document.querySelector('#holder>li[data-page="' + curPage + '"]').classList.add('active'); 
 
    if (first) { 
 
    holder.addEventListener('click', function(e) { 
 
     if (!e.target.getAttribute('data-page')) { 
 
     // no relevant item clicked (you could however offer expand here) 
 
     return; 
 
     } 
 
     curPage = parseInt(e.target.getAttribute('data-page')); 
 
     render(curPage, item); 
 
    }); 
 
    } 
 
} 
 

 
render(2, item, true);

#holder > li { 
 
    padding: 5px; 
 
    margin: 2px; 
 
    display: inline-block; 
 
} 
 
#holder > li[data-page] { 
 
    border: solid #a0a0a0 1px; 
 
    border-radius: 5px; 
 
} 
 
#holder > li.separator:before { 
 
    content: '...'; 
 
} 
 
#holder > li.active { 
 
    background-color: darkblue; 
 
    color: #fff; 
 
} 
 
#holder > li[data-page]:hover { 
 
    cursor: pointer; 
 
}

<div id="holder"></div>