我使用vanilla JavaScript来实现列表项的分页。我只挑选了前10个元素,其余元素都设置为display: none
。当用户点击页码时,我会将这些元素放在display: ''
上,同时将display: none
放在其余的列表项上。现在,当我想提供搜索功能(使用oninput
事件)时,如何添加分页以及搜索?它弄乱了每一件事。
另外,如果有人可以为我提供良好的链接 功能是使用vanilla JavaScript实现的。我没能 找到任何例子。
答案 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。
注意:此处没有验证,搜索返回一个包含与您的搜索匹配的元素的数组。
然而, 我确实建议您不要重新发明轮子,而是使用已有的库。