如何使用我的数据表与过滤器创建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插件。 它会很好地处理你的分页。