任何人都可以帮助我为我的数据表添加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(); 
}); 

访问他们的网站以获得更多帮助。