var totalItems = $("#resultsList").children().length;
var itemsPerPage = 10;
var pages = Math.ceil(totalItems / itemsPerPage);
function createPagination(pages, page) {
var str = '<ul class="paginatorList">';
var active;
var pageCutLow = page - 1;
var pageCutHigh = page + 1;
var prevButton = '<li class=\'page-item previous\'><a onclick=\'createPagination(pages, ' + (page - 1) + ');\'><</a></li>';
var nextButton = '<li class="page-item next"><a onclick="createPagination(pages, ' + (page + 1) + ');">></a></li>';
var firstPage = '<li class="page-item page-item"><a onclick="createPagination(pages, 1);">1</a></li>';
var ellipseL = '<li class="page-item out-of-range"><a onclick="createPagination(pages, ' + (page - 2) + ');">...</a></li>';
var ellipseR = '<li class="page-item out-of-range"><a onclick="createPagination(pages, ' + (page + 2) + ');">...</a></li>';
// Show the Previous button only if you are on a page other than the first
if (page > 1) { str += prevButton; }
// Show all the pagination elements if there are less than 6 pages total
if (pages < 6) {
for (let p = 1; p <= pages; p++) {
active = page == p ? " active" : '';
var activePage = "<li class=\"page-item" + active + "\"><a onclick=\"createPagination(pages, " + p + ")\">" + p + "</a></li>";
str += activePage;
}
}
// Use "..." to collapse pages outside of 3 pages range
else {
// Show the very first page followed by a "..." at the beginning of the pagination section (after the Previous button)
if (page > 2) {
str += firstPage;
if (page > 3) {
str += ellipseL;
}
}
// Determine how many pages to show after the current page index
(page === 1) ? pageCutHigh += 2 : (page === 2) ? pageCutHigh += 1 : null;
// Determine how many pages to show before the current page index
(page === pages) ? pageCutLow -= 2 : (page === pages-1) ? pageCutLow -= 1 : null;
// Output the indexes for pages that fall inside the range of pageCutLow and pageCutHigh
for (let p = pageCutLow; p <= pageCutHigh; p++) {
if (p === 0) { p += 1; }
if (p > pages) { continue }
active = (page == p) ? " active" : '';
var activePage = "<li class=\"page-item" + active + "\"><a onclick=\"createPagination(pages, " + p + ")\">" + p + "</a></li>";
str += activePage;
}
// Show the very last page preceded by a "..." at the end of the pagination section (before the Next button)
if (page < pages-1) {
if (page < pages-2) {
str += ellipseR;
}
str += '<li class="page-item no"><a onclick="createPagination(pages, pages)">'+pages+'</a></li>';
}
}
// Show the Next button only if you are on a page other than the last
if (page < pages) { str += nextButton; }
str += '</ul>';
// Return the pagination string to be outputted
$("div[id^=pager]").html(str);
listFilter();
return str;
}
function listFilter() {
window.scrollTo(0,0);
function _toConsumableArray(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
} else {
return Array.from(arr);
}
}
var list = document.querySelectorAll('.resultsItem');
var items = [].concat(_toConsumableArray(list));
var currentPgVal = parseInt(document.querySelector('.page-item.active a').textContent);
var rangeMax = (currentPgVal) * Number(itemsPerPage) - 1;
var rangeMin = (rangeMax - Number(itemsPerPage)) + 1;
for (var item in items) {
if (item <= rangeMax && item >= rangeMin) {
var sortDir = $('#filterBtn').find('i[class$=active]').data('sortdir');
var sortOption = $('#filterOptions').find(':selected').val();
tinysort('.resultsItem', { order: '' + sortDir, selector: '.' + sortOption });
items[item].classList.remove("hidden_apa");
}
}
}
// Sort when Icon clicked
$('#filterBtn i').on('click', function () {
var currentPgVal = parseInt(document.querySelector('.page-item.active a').textContent);
var rangeMax = (currentPgVal) * Number(itemsPerPage) - 1;
var rangeMin = (rangeMax - Number(itemsPerPage)) + 1;
var sortDirection = $('#filterBtn').find('i[class$=active]').data('sortdir');
var sortOption = $('.filterOptions').find(':selected').val();
// toggle displaying the two icons, A-Z or Z-A
$('i[class*=fa-sort-alpha]').toggleClass('hidden active');
// Hide all the items
$('.resultsItem').removeClass('active').addClass('hidden');
// Get the total list
var results = document.querySelectorAll('.resultsItem');
results.forEach(
function(val, i, listObj) {
console.log(i, val, this);
if(i >= rangeMin && i <= rangeMax) {
tinysort('.resultsItem', { order: '' + sortDirection, selector: '.' + sortOption });
// console.log(i, val);
$(this).removeClass('hidden');
}
});
});
$(document).ready(function () {
$("div[id^=pager]").html(createPagination(pages, 1));
}); <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filterOptions">
<select name="filterMenu" class="searchFieldMenu">
<option value="firstName" data-sortby="first">First Name</option>
<option value="lastName" data-sortby="last">Last Name</option>
<option value="cityName" data-sortby="city">City</option>
<option value="stateName" data-sortby="state">State</option>
</select>
<div id="filterBtn">
<i class="fa fa-sort-alpha-asc active" data-sortdir="asc" aria-hidden="true"></i>
<i class="fa fa-sort-alpha-desc hidden_apa" data-sortdir="desc" aria-hidden="false"></i>
</div>
</div>
<ul id="resultsList">
<li class="resultsItem">
<div class="infoBox">
<h2 class="firstName">Zack</h2>
<h2 class="lastName">Last Name A</h2>
<div class="title">Manager</div>
<div class="company">Walmart</div>
<div class="location">
<span class="cityName">Juno</span>,
<span class="stateName">AK</span>
<br>United States</div>
</div>
</li>
</ul>
<div class="pagination" id="pager">
<ul class="paginatorList">
<li class="page-item active">
<a onclick="createPagination(pages, 1)">1</a>
</li>
<li class="page-item">
<a onclick="createPagination(pages, 2)">2</a>
</li>
</ul>
</div>
POST UPDATE
我已经包含了所有相关的JS以允许代码段工作。 ul 必须添加许多结果，但我认为 TOO 要显示的代码很多。
我点击了图标后尝试对结果列表进行排序。预期结果应该是隐藏UL中的所有元素，然后取消隐藏符合条件的结果。
条件基于分页，我使用Tinysort对列表进行排序。
例如，假设您在第1页，共3页，每个页面只显示10个结果。当您单击图标以对整个列表 A-Z 进行排序时，要显示的结果是其索引在该页面范围内的项目。所以第1页的范围是1到10。
我已经关闭了，而且我无法删除符合条件的项目上的隐藏课程。
我希望我能很好地解释这一点。到目前为止，我将添加我的代码。
我认为 REAL 问题出现在NodeList或 .forEach 循环中。答案 0 :(得分：1)
我必须稍微修改您的代码才能使其正常工作（在您发布更新之前）。
然后我就把它分类了：
var itemsPerPage = 2;
// Sort when Icon clicked
$('#filterBtn i').on('click', function() {
var currentPgVal = parseInt(document.querySelector('.page-item.active a').textContent);
var rangeMax = currentPgVal * Number(itemsPerPage) - 1;
var rangeMin = (rangeMax - Number(itemsPerPage)) + 1;
var sortDirection = $('#filterBtn').find('i[class$=active]').data('sortdir');
var sortOption = $('.filterOptions').find(':selected').val();
// toggle displaying the two icons, A-Z or Z-A
$('i[class*="fa-sort-alpha"]').toggleClass('hidden_apa active');
var results = document.querySelectorAll('.resultsItem');
// sort
tinysort(results, {
order: sortDirection
})
// Hide out-of-range elements
.forEach(function(val, i) {
console.log(i, val.innerText);
$(val)[(
i < rangeMin || i > rangeMax ?
'add' : 'remove'
) + 'Class']('hidden_apa');
});
});.hidden_apa {
display: none !important;
}
.active {
display: inline-block;
color: red
}<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filterBtn">
<i class="fa fa-sort-alpha-asc hidden_apa" data-sortdir="asc" aria-hidden="true"></i>
<i class="fa fa-sort-alpha-desc active" data-sortdir="desc" aria-hidden="false"></i>
</div>
<ul id="resultsList">
<li class="resultsItem">Item 1</li>
<li class="resultsItem">Item 2</li>
<li class="resultsItem hidden_apa">Item 3</li>
<li class="resultsItem hidden_apa">Item 4</li>
<li class="resultsItem hidden_apa">Item 5</li>
<li class="resultsItem hidden_apa">Item 6</li>
</ul>
<div class="pagination" id="pager">
<span class="page-item active"><a>1</a></span>
<span class="page-item"><a>2</a></span>
<span class="page-item"><a>3</a></span>
</div>