簡單的jQuery動態分頁

Question

而不是下載和使用別人的真棒插件，我想寫我自己的分頁腳本。

這裏是我迄今爲止

我的問題是我會怎樣更有效地做排序功能？有沒有一種方法可以首先根據var聲明我聲明的和它相對於行的id，並確定類似於＃something5是第五行，那麼從第6行迭代到第11行？而不是如圖所示使用.next（）函數。

<div id="rows"> 
    <div class="row" id="something1">something1</div> 
    <div class="row" id="something2">something2</div> 
    <div class="row" id="something3">something3</div> 
    <div class="row" id="something4">something4</div> 
    <div class="row" id="something5">something5</div> 
    <div class="row" id="something6">something6</div> 
    <div class="row" id="something7">something7</div> 
    <div class="row" id="something8">something8</div> 
    <div class="row" id="something9">something9</div>  
    <div class="row" id="something10">something10</div> 
    <div class="row" id="something11">something11</div> 
    <div class="row" id="something12">something12</div> 
</div> 
<a href="#" id="prev">prev</a> 
<a href="#" id="next">next</a> 
<br /> 
<span id="total"></span> 

var max = 5; 

function sort(x) { 
     if (x == "prev") { 
      var first = $('#rows .row:visible').first().attr('id'); 
      if (first != "something5") { 
       $('#rows .row').hide(); 
       $('#'+first).prev('div').show(); 
       $('#'+first).prev('div').prev('div').show(); 
       $('#'+first).prev('div').prev('div').prev('div').show(); 
       $('#'+first).prev('div').prev('div').prev('div').prev('div').show(); 
       $('#'+first).prev('div').prev('div').prev('div').prev('div').prev('div').show(); 
      } 
     } else { 
      var last = $('#rows .row:visible').last().attr('id'); 
      $('#rows .row').hide(); 
      $('#'+last).next('div').show(); 
      $('#'+last).next('div').next('div').show(); 
      $('#'+last).next('div').next('div').next('div').show(); 
      $('#'+last).next('div').next('div').next('div').next('div').show(); 
      $('#'+last).next('div').next('div').next('div').next('div').next('div').show(); 
     } 
} 

$(document).ready(function() { 
     var total = $('#rows .row').size(); 
     var pages = total/max; 
     $("#total").text("page " + pages + " of " + total); 

     $('#rows .row').hide(); 

     for (i = 0; i < max; i++) { 
      $('#rows .row').eq(i).css('display', 'block'); 
     } 

     $('#prev').click(function() { 
      sort("prev"); 
     }); 

     $('#next').click(function() { 
      sort("next"); 
     }); 
}); 

的jsfiddle這裏http://jsfiddle.net/DcNLJ/

Answer 1

試試這個：

http://jsfiddle.net/DcNLJ/1/

什麼留給FOT u到做是爲了照顧邊緣情景（防止在啓動或結束旁邊上一頁）

var max = 5; 
var pageNum = 0; 
var _ = $('#rows .row'); 

$(document).ready(function() 
{ 
    var total = _.length; 
    var pages = total/max; 


    $('#prev').click(function() 
    { 
     pageNum--; 
     sort("prev"); 
    }); 

    $('#next').click(function() 
    { 
     pageNum++; 
     sort("next"); 
    }); 

    $('#next').trigger('click'); 

}); 


function sort(a) 
{ 
    _.hide(); 
    _.filter(function (i) 
    { 
     return i >= (pageNum - 1) * max && i < (pageNum) * max; 
    }).show(); 
    $("#total").text("page " + pageNum + " of " + Math.ceil($('#rows .row').length/max)); 
}