链接的javascript分页

Question

我正在尝试为我的<li> 链接制作一个简单的（仅下一个前一个按钮）javascript 分页

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>

我不想使用 jquery。我的代码几乎可以工作了。

当用户转到下一页时，我需要将 page1 的 "display: none;" 更改为 "display: block;"，然后将 page1 更改为 "display: none;" ...

Answer 1

两个问题：

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>

Answer 2

我猜 smarx 的答案是正确的，但我还是发布了这个答案。

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