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。我的代码即将运行。

我需要改变"display: none;"至"display: block;"对于 page1，然后将 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>