javascript pagination for links

Question

I'm trying to make a simple (only next previous buttons) javascript pagination for my <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">
     <div id="listingTable">
      <ul id = "Mylinks" class="paging">
       <li style="display: none;"><a href="http://site1.com" rel="nofollow">Description1</a></li>
       <li style="display: none;"><a href="http://site2.com" rel="nofollow">Description2</a></li>
       <li style="display: none;"><a href="http://site3.com" rel="nofollow">Description3</a></li>
       <li style="display: none;"><a href="http://site4.com" rel="nofollow">Description4</a></li>
       <li style="display: none;"><a href="http://site5.com" rel="nofollow">Description5</a></li>
       <li style="display: none;"><a href="http://site6.com" rel="nofollow">Description6</a></li>
       <li style="display: none;"><a href="http://site7.com" rel="nofollow">Description7</a></li>
       <li style="display: none;"><a href="http://site100.com" rel="nofollow">Description100</a></li>
       //Number of links is unlimited.
      </ul>
     </div>
     <ul class="pager">
       <li><a href="javascript:prevPage()" id="btn_prev">previous</a></li>
       <li><a href="javascript:nextPage()" id="btn_next">next</a></li>
     </ul>
    </div>

I don't want to use jquery. My code is nearly working.

I need to change "display: none;" to "display: block;" for page1 and then change page1 to "display: none;" when user go to next page ...

jsfiddle link : https://jsfiddle.net/alipour66m/rnLbo80q/ – محمد علی پور فتحکوهی Oct 11 '16 at 14:40 — محمد علی پور فتحکوهی, Oct 11 '16 at 14:40

score 2 · Accepted Answer · answered Oct 11 '16 at 14:43

Two issues:

You only defined items in changePage, but you used it elsewhere. I moved the declaration to the global scope.
You set elements that should be visible to display:block but failed to set elements that should be invisible to display:none. I changed the for loop in changePage to do both.

The below code works as expected:

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

Does document.querySelectorAll Compatible with all browser? @smarx — محمد علی پور فتحکوهی, Oct 11 '16 at 16:59
Is there a better code instead of document.querySelectorAll ?@smarx — محمد علی پور فتحکوهی, Oct 11 '16 at 17:16
See http://stackoverflow.com/questions/11503534/jquery-vs-document-queryselectorall. Looks like `document.querySelectorAll` is okay these days (depending on how far back you need to go in terms of browser support). jQuery is what people tend to use instead. — user94559, Oct 11 '16 at 17:55

score 0 · Answer 2 · answered Oct 11 '16 at 15:07

I guess smarx answer is correct, but I post this answer anyway.

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

I was editing your fiddle and smarx posted the answer before I did. I didn't checked his answer so I posted my answer too. How I said, I've already assumed that his answer is correct. — maxeh, Oct 11 '16 at 17:19
Please edit `I guess smarx answer is correct, but I post this answer anyway.` stackoverflow tell me I can not vote up this answer until Max edit it @Max. `You last voted on this answer 37 mins ago. Your vote is now locked in unless this answer is edited.` — محمد علی پور فتحکوهی, Oct 11 '16 at 17:36

javascript pagination for links

2 Answers2