3
jQuery에서 페이지 매김과 알파벳 필터를 사용합니다. 그것은 잘 작동하지만 하나 이상의 링크 (모두)를 추가하려면 사용자가 해당 링크를 클릭하면 모든 데이터가 표시됩니다. 여기페이지 매김과 알파벳 필터 문제
JS 코드 :
$(window).load(function() {
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
var itemsNumber = 10;
var min = 0;
var max = itemsNumber;
function pagination(action) {
var totalItems = $("#item-wrapper").find("li").length;
if (max < totalItems) { //Stop action if max reaches more than total items
if (action == "next") {
min = min + itemsNumber;
max = max + itemsNumber;
}
}
if (min > 0) { //Stop action if min reaches less than 0
if (action == "prev") {
min = min - itemsNumber;
max = max - itemsNumber;
}
}
else {
}
$("#item-wrapper").find("li").hide();
$("#item-wrapper").find("li").slice(min, max).show();
if (action == "next"){
if (max < totalItems)
{
$("#prev").removeClass("previous_link_gray");
$("#prev").addClass("previous_link");
}
else
{
$("#next").removeClass("next_link");
$("#next").addClass("next_link_gray");
}
}
if (action == "prev"){
if (min>0)
{
$("#next").removeClass("next_link_gray");
$("#next").addClass("next_link");
}
else
{
$("#prev").removeClass("previous_link");
$("#prev").addClass("previous_link_gray");
}
}
var mymax = max;
if(parseInt(max) > parseInt(totalItems)) {
mymax = totalItems;
}
var pagelbl = (parseInt(min) + 1) + ' to ' + mymax + ' of ' + totalItems;
$("#spnpage").html(pagelbl);
}
pagination();
//Next
$("#next").click(function() {
action = "next";
pagination(action);
})
//Previous
$("#prev").click(function() {
action = "prev";
pagination(action);
})
}); //]]>
function getSelected(Alphabet) {
$(".filter").find('a').removeClass('Selected');
$("#" + Alphabet).addClass('Selected');
$("#prev").removeClass("previous_link_gray");
$("#next").removeClass("next_link_gray");
$("#prev").addClass("previous_link");
$("#next").addClass("next_link");
}
HTML :
<li><a href="#category-a11" id="all" onclick="getSelected('All')" class="Selected">All</a></li>
<li><a href="#category-A" id="A" onclick="getSelected('A')">A</a></li>
<li><a href="#category-B" id="B" onclick="getSelected('B')">B</a></li>
jsfiddle을 작성해야합니다. 코드에서 많은 상호 작용을 수행하고 HTML에는 정확한 구조가 아닌 해당 상호 작용을 수행하는 링크 만 포함되어 있기 때문입니다. – CoolEsh
또한 코드 필터링 데이터에 알파벳순으로 줄이 없어야합니다. 그러나 단일 문자를 필터링 할 때 작동하면 코드를 만들기 위해 첫 번째 문자로 필터링 된 데이터 대신 목록의 모든 데이터를 선택하면됩니다. 그렇지 않습니까? –