Question

而不是下载和使用别人的精彩插件，我想编写自己的分页脚本。

这是我到目前为止所拥有的

我的问题是如何更有效地执行排序功能？有没有一种方法可以基于我声明的var和它相对于行的id进行识别，并确定类似#thing5是第五行，所以从第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/

你要做的就是照顾边缘情景（防止在开始或接下来结束时出现）

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));
}

简单的jQuery动态分页

1 个答案: