分頁和alphabatic過濾器發出

我使用分頁和jQuery的字母過濾器。它工作正常，但我想添加一個鏈接（全部），當用戶點擊該鏈接時，它會顯示所有數據。分頁和alphabatic過濾器發出

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>

來源

2012-12-07 Ramde Solanki

您應該創建的jsfiddle，因爲在你的代碼，你會完成很多的互動，你的HTML只包含鏈接用於進行互動，而不是確切結構 – CoolEsh

而且你必須在你的代碼過濾數據沒有按字母順序線。但是，如果當你在一個單個字母過濾它的工作原理，你只需要選擇你的列表，而不是由第一個字母，讓您的工作代碼過濾數據的所有數據，不是嗎？ –

您可能需要提供更多的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"); 
    } 
}

這是否有意義與您現有的標記？

來源

2012-12-07 22:17:47

分頁和alphabatic過濾器發出

回答

相關問題