js過濾多頁串列

我有一個使用 JS 的過濾串列，但串列元素的數量正在增長。所以我需要將串列分成幾頁，但過濾器要繼續為整個串列作業，即使串列元素沒有顯示，因為它在另一個頁面中。

我已經看到如何為串列制作“上一個”和“下一個”按鈕，但它分解了過濾器 js，因為它基本上包括將內容放在不同的 div 上，但過濾器只會過濾第一個。

這是我現在的 HTML：

<section>
  <input type="text" id="barraBusqueda" onkeyup="buscar()" placeholder="Buscar artículos">
  <ul id="articulos">
    <li><a href="/es/blog/1.html">Article 1</a></li>
    <li><a href="/es/blog/2.html">Article 2</a></li>
    <li><a href="/es/blog/3.html">Article 3</a></li>
    <li><a href="/es/blog/4.html">Article 4</a></li>
    <li><a href="/es/blog/5.html">Article 5</a></li>
    <li><a href="/es/blog/6.html">Article 6</a></li>
    <li><a href="/es/blog/7.html">Article 7</a></li>
    <li><a href="/es/blog/8.html">Article 8</a></li>
    <li><a href="/es/blog/9.html">Article 9</a></li>
    <li><a href="/es/blog/10.html">Article 10</a></li>
  </ul>
</section>
    

還有我的 JS：

function buscar() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("barraBusqueda");
  filter = input.value.toUpperCase();
  ul = document.getElementById("articulos");
  li = ul.getElementsByTagName("li");

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

它作業正常，但必須顯示所有元素，我不希望在數十個串列項中永久滾動。

目標是瀏覽器一次只顯示 5 個串列項，并使用下一個和上一個按鈕來瀏覽它們，但過濾器會考慮所有串列項，即使是其他頁面中的串列項。

uj5u.com熱心網友回復：

我建議將資料與表示分開。這使得結合過濾和分頁更容易。

作為第一步，我將創建一個描述條目串列的物件陣列。您可以在此陣列上執行過濾。其次，我會撰寫一個呈現串列條目的函式。這樣您就不必隱藏 HTML 元素，您只需呈現那些與您的過濾器和/或頁面匹配的元素。

請看一下這個（不完整的）作業示例：

// The maximum size of a single page
const pageSize = 5;

// All list entries (unfiltered)
const data = [
   { name: 'Article 1', url: '/es/blog/1.html' },
   { name: 'Article 2', url: '/es/blog/2.html' },
   { name: 'Article 3', url: '/es/blog/3.html' },
   { name: 'Article 4', url: '/es/blog/4.html' },
   { name: 'Article 5', url: '/es/blog/5.html' },
   { name: 'Article 6', url: '/es/blog/6.html' },
   { name: 'Article 7', url: '/es/blog/7.html' },
   { name: 'Article 8', url: '/es/blog/8.html' },
   { name: 'Article 9', url: '/es/blog/9.html' },
   { name: 'Article 10', url: '/es/blog/10.html' },
   { name: 'Article 11', url: '/es/blog/11.html' },
   { name: 'Article 12', url: '/es/blog/12.html' },
   { name: 'Article 13', url: '/es/blog/13.html' },
   { name: 'Article 14', url: '/es/blog/14.html' },
];

// The filtered data; initially equal to `data`; 
// modified by function filter()
let filteredData = data;

// The current page index
let currentPage = 0;

// Adds/removes the `disabled` attribute from the element by
// specified ID according to the `disabled` flag
function updateButtonState(id, disabled) {
  const button = document.getElementById(id);
  if (disabled) {
    button.setAttribute('disabled', 'true');
  }
  else {
    button.removeAttribute('disabled');
  }
}

// Updates the states of the Previous/Next buttons
function updateButtonStates() {
  updateButtonState('btn-prev', currentPage === 0);
  updateButtonState('btn-next', (currentPage   1) * pageSize >= filteredData.length);
}

// Filters the `data` array according to the given text
function filter(text) {
  filteredData = data.filter(entry => entry.name.includes(text));
  renderPage(currentPage);
}

// Renders a single page, using the `filteredData` array
function renderPage(pageNo) {
  currentPage = pageNo;

  const elList = document.getElementById('list');
  elList.innerHTML = '';

  const offset = pageNo * pageSize;
  for (let i = offset; i < offset   pageSize && i < filteredData.length; i  ) {
    const entry = filteredData[i];
    const li = elList.appendChild(document.createElement('li'));
    const anchor = li.appendChild(document.createElement('a'));
    anchor.innerHTML = entry.name;
    anchor.href = entry.url;
  }
  
  updateButtonStates();
}


// Render first page initially
renderPage(0);

<input type="text" onkeyup="filter(this.value)">

<ul id="list">
</ul>

<button id="btn-prev" onclick="renderPage(currentPage - 1)">Previous</button>
<button id="btn-next" onclick="renderPage(currentPage   1)">Next</button>

通過輸入1搜索欄位來測驗它。

標籤：javascript html 列表 筛选

上一篇：使用兩個串列洗掉專案

下一篇：如何比較兩個串列和mpython。-捕捉不同的價值