纯JavaScript实现分页选择每页显示条数后页面未实时更新问题求助

问题原因 #

• 你定义的pageselect函数仅更新了item_per_page变量的值，没有触发分页刷新逻辑changePage，所以下拉选择变更后页面看不到实时效果
• select元素取到的value是字符串类型，用于数值计算虽然大部分场景能隐式转换，但存在潜在异常风险，建议显式转为数字
• 切换每页展示数量后，当前页码可能大于新的总页数，需要做合法修正，避免出现空页问题

修复后完整JS代码 #

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

function pageselect() {
  // 把取值转为数字类型
  item_per_page = Number(document.getElementById("selectpage").value);
  // 切换每页数量后修正当前页为合法值，也可以直接重置为1
  if (current_page > numPages()) {
    current_page = numPages()
  }
  // 调用分页刷新方法触发视图更新
  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);
};

HTML代码无需修改，可直接沿用原有代码。

内容的提问来源于stack exchange，提问作者Dokey