Как вернуться на ту же активную страницу, когда поле ввода для поиска очищено? - PullRequest
Новая
       66

Как вернуться на ту же активную страницу, когда поле ввода для поиска очищено?

0 голосов
/ 07 августа 2020

Я использую приведенный ниже код для создания нескольких страниц из табличных данных, а также для фильтрации данных с помощью ввода поиска

Моя проблема в том, что я не могу сбросить активную страницу при вводе поиска очищается

Например, предположим, что пользователь просматривает страницу номер 2, на которой отображаются 3 результата или три строки данных

Если пользователь ввел какие-либо ключевые слова в строку поиска и удалил их, таблица показывает все строки вниз вместо того, чтобы просто вернуться к той же активной странице, которая находится в нашем примере страницы номер 2. Любая помощь приветствуется, заранее спасибо 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* { box-sizing: border-box; }

#myInput {
width: 100%;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 14px;
background-color: white;
padding: 12px 20px 12px 40px;
margin-bottom: 0.5em;
}

#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 14px;
}

#myTable th, #myTable td {
text-align: left;
padding: 12px;
}

#myTable tr { border-bottom: 1px solid #ddd; }

#myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }

div.pager {
text-align: right;
margin-bottom: 0.5em;
margin-right: -0.5em;
}

div.pager span {
display: inline-block;
width: 1.8em;
height: 1.8em;
line-height: 1.8;
text-align: center;
cursor: pointer;
background: #f1f1f1;
color: #000;
margin-right: 0.5em;
}

div.pager span.active { background: #000;color: #fff; }

</style>

</head>
<body>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..">

<table id="myTable">
<thead>
<tr class="header">
<th></th>
<th>First Name</th>
<th>Second Name</th>
<th>ID</th>
</tr>
</thead>

<tbody id="table-body">
<tr>
<td></td>
<td>Ab</td>
<td>Cd</td>
<td>01</td>
</tr>
<tr>
<td></td>
<td>Ef</td>
<td>Gh</td>
<td>02</td>
</tr>
<tr>
<td></td>
<td>Ij</td>
<td>Kl</td>
<td>03</td>
</tr>
<tr>
<td></td>
<td>Mn</td>
<td>Op</td>
<td>04</td>
</tr>
<tr>
<td></td>
<td>Qr</td>
<td>St</td>
<td>05</td>
</tr>
<tr>
<td></td>
<td>Uv</td>
<td>Wx</td>
<td>06</td>
</tr>
</tbody>
        
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script>
$('#myTable').each(function() {

var currentPage = 0;
var numPerPage = 3;
var $table = $(this);

$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * (numPerPage)).show();
});

$table.trigger('repaginate');

var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager"></div>');

for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('span.page-number:first').addClass('active');

});

function myFunction() {
var input, filter, table, tbody, tr, td, th, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tbody = document.getElementById("table-body");
tr = table.getElementsByTagName("tr");
th = table.getElementsByTagName("th");

for (i = 0; i < tr.length; i++) {
for(var j = 0; j < th.length; j++){
td = tr[i].getElementsByTagName("td")[j];

if (td) {
txtValue = td.textContent || td.innerText || td.innerHTML;

if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else { tr[i].style.display = "none"; }
}
}
}
}
</script>

</body>
</html>
...