バニラJavaScriptを使用してリストの検索とページ付けを両方とも実装する方法

Question

私はバニラJavaScriptを使用してリスト項目のページ設定を実装していました。私はちょうど最初の10要素を選択し、残りの要素はdisplay: noneに設定されています。ユーザーがページ番号をクリックすると、それらの要素を受け取り、残りのリスト項目にdisplay: noneを入れて、display: ''を入れます。今では、検索機能（oninputイベントを使用）を提供したい場合、検索と一緒にページネーションを追加するにはどうすればよいですか？それはすべてのものを台無しにする。

プラスいくつかのいずれかがこのような 機能は、バニラは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を見ることができます。

注：これには検証はありません。検索では、検索に一致する要素を含む配列が返されます。

ただし、私は車輪を再発明する代わりに、既に利用可能なライブラリの1つを使用することをお勧めします。