Question

我使用vanilla JavaScript来实现列表项的分页。我只挑选了前10个元素，其余元素都设置为display: none。当用户点击页码时，我会将这些元素放在display: ''上，同时将display: none放在其余的列表项上。现在，当我想提供搜索功能（使用oninput事件）时，如何添加分页以及搜索？它弄乱了每一件事。

另外，如果有人可以为我提供良好的链接功能是使用vanilla JavaScript实现的。我没能找到任何例子。

Answer 1

如果您想使用纯JavaScript执行此操作，可以执行以下操作：

<div>
  <input type="button" onclick="loadData();" value="Load Data" />
  <div>
    <input type="button" onclick="previousPage();" value="Back" />
    <input type="button" onclick="nextPage();" value="Next" />
  </div>
  <div>
    <input id="searchBox" type="text" value="" />
    <input type="button" onclick="searchData();" value="Search" />
    <div id="data">
    </div>
  </div>
</div>

var d = ['United States', 'Canada', 'England', 'Finland', 'Italy', 'Greece', 'France'];
var pageSize = 5;
var pageNum = 0;

function loadData() {
    document.getElementById('data').innerHTML = d.slice(pageNum * pageSize, (pageNum + 1) * pageSize).join('<br />');
}

function nextPage() {
    pageNum++;
    loadData();
}

function previousPage() {
    pageNum--;
    loadData();
}

function searchData() {
    var v = document.getElementById('searchBox').value;

    var s = d.filter(function(i) {
      return i.indexOf(v) > -1;
    });

    document.getElementById('data').innerHTML = s.join('<br />');
}

您可以在工作版本中看到此JS Fiddle。

注意：此处没有验证，搜索返回一个包含与您的搜索匹配的元素的数组。

然而， 我确实建议您不要重新发明轮子，而是使用已有的库。

如何使用vanilla JavaScript

1 个答案: