Javascript Paginierung für Links

Question

Ich versuche, eine einfache (nur nächsten vorherigen Tasten) JavaScript Paginierung für meine <li> Links

var current_page = 1; 
 
var records_per_page = 5; 
 

 
function prevPage() 
 
{ 
 
    if (current_page > 1) { 
 
    current_page--; 
 
    changePage(current_page); 
 
    } 
 
} 
 

 
function nextPage() 
 
{ 
 
    if (current_page < numPages()) { 
 
    current_page++; 
 
    changePage(current_page); 
 
    } 
 
} 
 

 
function changePage(page) 
 
{ 
 
    var btn_next = document.getElementById("btn_next"); 
 
    var btn_prev = document.getElementById("btn_prev"); 
 
    var items = document.querySelectorAll('#Mylinks li'); 
 
    // Validate page 
 
    if (page < 1) page = 1; 
 
    if (page > numPages()) page = numPages(); 
 

 
    for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < items.length; i++) { 
 
    items[i].style.display = "block"; 
 
    } 
 

 
    if (page == 1) { 
 
    btn_prev.style.visibility = "hidden"; 
 
    } else { 
 
    btn_prev.style.visibility = "visible"; 
 
    } 
 
    if (page == numPages()) { 
 
    btn_next.style.visibility = "hidden"; 
 
    } else { 
 
    btn_next.style.visibility = "visible"; 
 
    } 
 
} 
 
function numPages() 
 
{ 
 
    return Math.ceil(items.length/records_per_page); 
 
} 
 
window.onload = function() { 
 
    changePage(1); 
 
};

<div class="panel-body"> 
 
    \t <div id="listingTable"> 
 
    \t \t <ul id = "Mylinks" class="paging"> 
 
    \t \t \t <li style="display: none;"><a href="http://site1.com" rel="nofollow">Description1</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site2.com" rel="nofollow">Description2</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site3.com" rel="nofollow">Description3</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site4.com" rel="nofollow">Description4</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site5.com" rel="nofollow">Description5</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site6.com" rel="nofollow">Description6</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site7.com" rel="nofollow">Description7</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site100.com" rel="nofollow">Description100</a></li> 
 
    \t \t \t //Number of links is unlimited. 
 
    \t \t </ul> 
 
    \t </div> 
 
    \t <ul class="pager"> 
 
    \t <li><a href="javascript:prevPage()" id="btn_prev">previous</a></li> 
 
    \t <li><a href="javascript:nextPage()" id="btn_next">next</a></li> 
 
    \t </ul> 
 
    </div>

Ich will nicht verwenden jquery zu machen. Mein Code funktioniert fast.

muss ich "display: none;"-"display: block;" für Seite1 ändern und dann page1 zu "display: none;" ändern, wenn der Benutzer zur nächsten Seite ...

Answer 1

Zwei Fragen:

1. Sie definiert nur items in changePage, aber Sie benutzte es woanders. Ich habe die Deklaration in den globalen Bereich verschoben.
2. Sie legen Elemente fest, die für display:block sichtbar sein sollen, konnten jedoch keine Elemente festlegen, die für display:none unsichtbar sein sollten. Ich änderte die for Schleife in changePage, um beides zu tun.

Der Code unten funktioniert wie erwartet:

var current_page = 1; 
 
var records_per_page = 5; 
 
var items = document.querySelectorAll("#Mylinks li"); 
 

 
function prevPage() 
 
{ 
 
    if (current_page > 1) { 
 
    current_page--; 
 
    changePage(current_page); 
 
    } 
 
} 
 

 
function nextPage() 
 
{ 
 
    if (current_page < numPages()) { 
 
    current_page++; 
 
    changePage(current_page); 
 
    } 
 
} 
 

 
function changePage(page) 
 
{ 
 
    var btn_next = document.getElementById("btn_next"); 
 
    var btn_prev = document.getElementById("btn_prev"); 
 
    // Validate page 
 
    if (page < 1) page = 1; 
 
    if (page > numPages()) page = numPages(); 
 

 
    for (var i = 0; i < items.length; i++) { 
 
    if (i >= (page-1) * records_per_page && 
 
     i < page * records_per_page) { 
 
     items[i].style.display = "block"; 
 
    } else { 
 
     items[i].style.display = "none"; 
 
    } 
 
    } 
 

 
    if (page == 1) { 
 
    btn_prev.style.visibility = "hidden"; 
 
    } else { 
 
    btn_prev.style.visibility = "visible"; 
 
    } 
 
    if (page == numPages()) { 
 
    btn_next.style.visibility = "hidden"; 
 
    } else { 
 
    btn_next.style.visibility = "visible"; 
 
    } 
 
} 
 
function numPages() 
 
{ 
 
    return Math.ceil(items.length/records_per_page); 
 
} 
 
window.onload = function() { 
 
    changePage(1); 
 
};

<div class="panel-body"> 
 
    \t <div id="listingTable"> 
 
    \t \t <ul id = "Mylinks" class="paging"> 
 
    \t \t \t <li style="display: none;"><a href="http://site1.com" rel="nofollow">Description1</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site2.com" rel="nofollow">Description2</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site3.com" rel="nofollow">Description3</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site4.com" rel="nofollow">Description4</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site5.com" rel="nofollow">Description5</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site6.com" rel="nofollow">Description6</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site7.com" rel="nofollow">Description7</a></li> 
 
    \t \t \t <li style="display: none;"><a href="http://site100.com" rel="nofollow">Description100</a></li> 
 
    \t \t \t <!-- Number of links is unlimited. --> 
 
    \t \t </ul> 
 
    \t </div> 
 
    \t <ul class="pager"> 
 
    \t <li><a href="javascript:prevPage()" id="btn_prev">previous</a></li> 
 
    \t <li><a href="javascript:nextPage()" id="btn_next">next</a></li> 
 
    \t </ul> 
 
    </div>

Answer 2

Ich denke, Smarx Antwort richtig ist, aber ich poste diese Antwort trotzdem.

https://jsfiddle.net/rnLbo80q/2/

var current_page = 1; 
var records_per_page = 5; 
var items = document.querySelectorAll("#MypLinkbox li"); 

function prevPage() { 
    if (current_page > 1) { 
     current_page--; 
     changePage(current_page); 
    } 
} 

function nextPage() { 
    if (current_page < numPages()) { 
     current_page++; 
     changePage(current_page); 
    } 
} 

function changePage(page) { 
    var btn_next = document.getElementById("btn_next"); 
    var btn_prev = document.getElementById("btn_prev"); 

    // Validate page 
    if (page < 1) page = 1; 
    if (page > numPages()) page = numPages(); 

    // hide all 
    for (var i = 0; i < items.length; i++){ 
     items[i].style.display = "none"; 
    } 

    for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < items.length; i++) { 
     items[i].style.display = "block"; 
    } 

    if (page == 1) 
     btn_prev.style.visibility = "hidden"; 
    else 
     btn_prev.style.visibility = "visible"; 

    if (page == numPages()) 
     btn_next.style.visibility = "hidden"; 
    else 
     btn_next.style.visibility = "visible"; 

} 

function numPages() { 
    return Math.ceil(items.length/records_per_page); 
} 

window.onload = function() { 
    changePage(1); 
};