如何使用vanilla JavaScript

时间:2017-08-18 18:18:56

标签: javascript html css

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

  

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

1 个答案:

答案 0 :(得分: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

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

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