我有一个正在运行的分页脚本，以及我的过滤器脚本。不幸的是，一旦我过滤，它会过滤所有搜索项目，并且它超出了我的分页的最大限制，应该是这种情况。
我需要我的分页和过滤脚本一起工作。我有样品表供您使用。
我的整个脚本都是：
document.getElementById("myInput").onkeyup = function() {
filterBar()
};
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.disp lay = "";
} else {
tr[i].style.display = "none";
}
}
}
};
paginateTable();
function paginateTable() {
var currentPage = 0;
var numPerPage = 10;
var table = $('#myTable');
table.find('tbody tr').hide().slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage).show();
var numRows = table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
table.bind('repaginate', function() {
table.find('tbody tr').hide().slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage).show();
$('#totalEntries').text(numRows);
if (numRows == 0) {
$('#minEntry').text(numRows);
} else {
$('#minEntry').text((currentPage * 10) + 1);
}
if (currentPage == 0 || numRows == 0) {
$('.previousPage').hide();
} else {
$('.previousPage').show();
$('.previousPage').data('page', currentPage - 1);
}
if (currentPage == (numPages - 1) || numRows == 0) {
$('.nextPage').hide();
$('#maxEntry').text(numRows);
} else {
$('.nextPage').show();
$('.nextPage').data('page', currentPage + 1);
if (numRows < 10) {
$('#maxEntry').text(numRows);
} else {
$('#maxEntry').text((currentPage * 10) + 10);
}
}
$('#currentPage').text(currentPage + 1);
});
table.trigger('repaginate');
$('.previousPage, .nextPage').click(function(e) {
e.preventDefault();
currentPage = $(this).data('page');
table.trigger('repaginate');
});
}
这是我的样本表，带有分页按钮
过滤器：
<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>
<div class="table-pagination">
<div class="page-control">
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"><</a></li>
<li><a href="#" id="currentPage" class="page-number">1</a></li>
<li><a href="#" class="nextPage">></a></li>
<li><a href="#" class="nextPage">Older</a></li>
</ul>
</div>
</div>
</ul>