2012-12-07 4 views
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> 
+0

jsfiddle을 작성해야합니다. 코드에서 많은 상호 작용을 수행하고 HTML에는 정확한 구조가 아닌 해당 상호 작용을 수행하는 링크 만 포함되어 있기 때문입니다. – CoolEsh

+0

또한 코드 필터링 데이터에 알파벳순으로 줄이 없어야합니다. 그러나 단일 문자를 필터링 할 때 작동하면 코드를 만들기 위해 첫 번째 문자로 필터링 된 데이터 대신 목록의 모든 데이터를 선택하면됩니다. 그렇지 않습니까? –

답변

0

당신은 당신의 HTML을 더 제공해야 할 수도 있습니다,하지만 당신이해야 할 것 같아이 모든 목록 항목 show() 당신의 #item-wrapper 예.

$("#item-wrapper").find("li").show(); 

// A slightly more process efficient way of selecting would be 
$("#item-wrapper li").show(); 

그래서 getSelected 기능이 될 것입니다 : 현재 마크 업 의미를

function getSelected(Alphabet){ 
    if(Alphabet == "all"){ 
     // Hide prev/next btns as they wont make sense to user 
     $("#prev, #next").hide(); 
     // Show the items 
     $("#item-wrapper li").show(); 
    }else{ 
     $(".filter").find('a').removeClass('Selected'); 
     $("#" + Alphabet).addClass('Selected'); 
     $("#prev").show().removeClass("previous_link_gray"); 
     $("#next").show().removeClass("next_link_gray"); 
     $("#prev").addClass("previous_link"); 
     $("#next").addClass("next_link"); 
    } 
} 

합니까?

관련 문제