链接的Javascript分页

两个问题:

1. 您只在changePage中定义了items，但在其他地方使用了它。我把声明移到了全局作用域。
2. 你设置了应该对display:block可见的元素，但没有设置display:none不可见的元素。我改变了changePage中的for循环来做这两个。

下面的代码正常工作:

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>

我猜smarx的答案是正确的，但我还是把这个答案贴出来了。

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