我使用this code时,我的表格数据很少并且非常有用,但是当我将分页添加到表格中时,它现在只适用于我所在的页面。这是我需要进行过滤的分页路线:
router.get('/', (req, res)=>{
const perPage = 10;
const page = req.query.page || 1;
ElectoralUnit.find({})
.skip((perPage * page) - perPage)
.limit(perPage)
.populate('town')
.then(electoralUnits=>{
ElectoralUnit.count().then(electoralUnitCount=>{
Town.find({}).sort({name: 1}).then(towns=>{
res.render('admin/electoralUnits/index', {
electoralUnits: electoralUnits,
towns: towns,
current: parseInt(page),
pages: Math.ceil(electoralUnitCount / perPage)
});
});
});
});
});
表:
<div class="col-sm-8">
<input class="form-control" type="text" id="myInput" onkeyup="filterTowns()" placeholder="Filter: Ukucajte ime grada/opštine">
<table class="table table-hover" id="myTable">
<thead>
<tr>
<th>City</th>
<th>IJ</th>
<th>Datum unosa</th>
</tr>
</thead>
<tbody>
{{#each electoralUnits}}
<tr>
<td>{{town.name}}</td>
<td>{{name}}</td>
<td>{{generateDate date 'DD. MMM. YYYY.'}}</td>
<td><a href="/admin/electoralUnits/edit/{{id}}" class="btn btn-outline-info btn-sm">Edit</a></td>
<td>
<form action="/admin/electoralUnits/{{id}}?_method=DELETE" method="post">
<button class="btn btn-outline-danger btn-sm">Delete</button>
</form>
</td>
</tr>
{{/each}}
</tbody>
</table>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
{{#paginate current=current pages=pages}}{{/paginate}}
</ul>
</div>
使用Javascript:
function filterTowns() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
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";
}
}
}
}
Google for this solution,我找到了一些像this这样的解决方案,但我的代码没有运气。
如何修改w3schools中的代码以过滤分页提供的整个页面,而不仅仅是我当前的页面?