任何人都可以幫助我爲我的數據表添加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(); 
}); 

訪問他們的網站以獲得更多幫助。