如何使用我的數據表與過濾器創建JavaScript的異教徒

Question

任何人都可以幫助我在當前的腳本上添加一個簡單的分頁腳本。 我需要將我的數據表放置在每頁5頁上，這也許可以訪問我創建的當前過濾器。請幫我解決這個問題。

這是我的過濾器腳本

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"; 
       } 
      } 
     } 
    } 

這是我的數據表

篩選：

<table id="myTable"> 
    <thead> 
     <tr> 
      <th style="width: 60%;">Name</th> 
      <th style="width: 40%;">Country</th> 
      <th style="width: 30%;">Age</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> 

預先感謝您的幫助傢伙！

Answer 1

試試從DataTable插件。 它會很好地處理你的分頁。