纯javascript分页选择每页项目答案

【问题标题】：pure javascript pagination select item per page纯javascript分页选择每页项目
【发布时间】：2021-07-20 13:49:11
【问题描述】：

我有以下代码。传递每页显示项的选择值

问题：值看似正确传递，但页面无法正确实时显示

任何人都可以用我的代码提供建议吗？

var current_page = 1;
var item_per_page;
var pagelength = document.getElementById("listingTable").rows.length

function pageselect() {
  item_per_page = document.getElementById("selectpage").value;
}

pageselect();

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 listing_table = document.getElementById("listingTable");
  var page_span = document.getElementById("page");

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

  [...listing_table.getElementsByTagName('tr')].forEach((tr) => {
    tr.style.display = 'none'; // reset all to not display
  });
  listing_table.rows[0].style.display = ""; // display the title row

  for (var i = (page - 1) * item_per_page + 1; i < (page * item_per_page) + 1; i++) {
    if (listing_table.rows[i]) {
      listing_table.rows[i].style.display = ""
    } else {
      continue;
    }
  }

  page_span.innerHTML = page + "/" + numPages();

  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((pagelength - 1) / item_per_page);
}

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

<select id="selectpage" onchange="pageselect()">
  <option value="1">1</option>
  <option value="3">3</option>
</select>


<table id="listingTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
<a onclick="prevPage()" id="btn_prev">Prev</a>
<a onclick="nextPage()" id="btn_next">Next</a> page: <span id="page"></span>

对不起，我的英语不好，无法解释我需要什么，希望你明白我需要什么

谢谢！

【问题讨论】：

标签： javascript pagination

【解决方案1】：

您只需在pageselect 上致电changePage。

var current_page = 1;
var item_per_page;
var pagelength = document.getElementById("listingTable").rows.length

function pageselect() {
  item_per_page = document.getElementById("selectpage").value;
  changePage(current_page);
}

pageselect();

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 listing_table = document.getElementById("listingTable");
  var page_span = document.getElementById("page");

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

  [...listing_table.getElementsByTagName('tr')].forEach((tr) => {
    tr.style.display = 'none'; // reset all to not display
  });
  listing_table.rows[0].style.display = ""; // display the title row

  for (var i = (page - 1) * item_per_page + 1; i < (page * item_per_page) + 1; i++) {
    if (listing_table.rows[i]) {
      listing_table.rows[i].style.display = ""
    } else {
      continue;
    }
  }

  page_span.innerHTML = page + "/" + numPages();

  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((pagelength - 1) / item_per_page);
}

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

<select id="selectpage" onchange="pageselect()">
  <option value="1">1</option>
  <option value="3">3</option>
</select>


<table id="listingTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
<a onclick="prevPage()" id="btn_prev">Prev</a>
<a onclick="nextPage()" id="btn_next">Next</a> page: <span id="page"></span>

【讨论】：