私のデータテーブルにJavascriptページネーションを追加するのに助けてもらえますか

Question

私のデータテーブルには、テーブルの名前をフィルタリングするスクリプトがあります。私は本当に皆さんが私の現在のスクリプトにページネーションスクリプトを追加する手助けをしてくれることを本当に望んでいます。

私はこの件に関して深刻な助けが必要です。そんなにありがとう:(追加JSの応答を期待して、私は非常に助けに感謝します

JS

function filterBar() { 
     var input, filter, table, tr, td, i; 
     input = document.getElementById("myInput"); 
     filter = input.value.toUpperCase(); 
     table = document.getElementById("myTable"); 
     tr = table.getElementsByTagName("tr"); 
     for (i = 0; i < tr.length; i++) { 
      td = tr[i].getElementsByTagName("td")[0]; 
      if (td) { 
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        tr[i].style.display = ""; 
       } else { 
        tr[i].style.display = "none"; 
       } 
      } 
     } 
    } 

私のDataTable

フィルタ：！。

<table id="myTable"> 
    <thead> 
     <tr> 
      <th style="width: 60%;">English</th> 
      <th style="width: 40%;">Other Language</th> 
      <th style="width: 30%;">Status</th> 

     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Alfreds Futterkiste</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Berglunds snabbkop</td> 
      <td>Sweden</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Island Trading</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Koniglich Essen</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Laughing Bacchus Winecellars</td> 
      <td>Canada</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Magazzini Alimentari Riuniti</td> 
      <td>Italy</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>North/South</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Paris specialites</td> 
      <td>France</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Alfreds Futterkiste</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Berglunds snabbkop</td> 
      <td>Sweden</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Island Trading</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Koniglich Essen</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Laughing Bacchus Winecellars</td> 
      <td>Canada</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Magazzini Alimentari Riuniti</td> 
      <td>Italy</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>North/South</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Paris specialites</td> 
      <td>France</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Alfreds Futterkiste</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Berglunds snabbkop</td> 
      <td>Sweden</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Island Trading</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Koniglich Essen</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Laughing Bacchus Winecellars</td> 
      <td>Canada</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Magazzini Alimentari Riuniti</td> 
      <td>Italy</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>North/South</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Paris specialites</td> 
      <td>France</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Alfreds Futterkiste</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Berglunds snabbkop</td> 
      <td>Sweden</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Island Trading</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Koniglich Essen</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Laughing Bacchus Winecellars</td> 
      <td>Canada</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Magazzini Alimentari Riuniti</td> 
      <td>Italy</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>North/South</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Paris specialites</td> 
      <td>France</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Alfreds Futterkiste</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Berglunds snabbkop</td> 
      <td>Sweden</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Island Trading</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Koniglich Essen</td> 
      <td>Germany</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Laughing Bacchus Winecellars</td> 
      <td>Canada</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Magazzini Alimentari Riuniti</td> 
      <td>Italy</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>North/South</td> 
      <td>UK</td> 
      <td>28</td> 
     </tr> 
     <tr> 
      <td>Paris specialites</td> 
      <td>France</td> 
      <td>28</td> 
     </tr> 
    </tbody> 
</table> 


     Showing <span id="minEntry">0</span> to <span id="maxEntry">0</span> 
     of <span id="totalEntries">0</span> entries 
     <ul class="pagination"> 
      <li><a href="#" class="previousPage">Newer</a></li> 
      <li><a href="#" class="previousPage">&lt;</a></li> 
      <li><a href="#" id="currentPage" class="page-number">1</a></li> 
      <li><a href="#" class="nextPage">&gt;</a></li> 
      <li><a href="#" class="nextPage">Older</a></li> 
     </ul> 

Answer 1

DataTables Table plug-in for jQueryについて聞いたことがありますか？

Itあなたのテーブルに検索機能とページ機能を追加する、非常に簡単で簡単な方法です。

あなただけの彼らのJSとCSSファイルを追加して呼び出す必要があります：

$(document).ready(function(){ 
    $('#myTable').DataTable(); 
}); 

より多くの助けのために彼らのウェブサイトをご覧ください。