javascript - Jquery Paginate 将项目放在第二页上，并且列表上没有限制，因此实际上并不分页

Question

查看我的 JsFiddle http://jsfiddle.net/iamdanbarrett/frbh9/

所以这是分页的内联JS......

            <script>
                        $(window).load(
function()
{
  var o=$('#paginate').first(),
      h=o.height(),
      c=$('<div/>').css('width',o.width()).addClass('part'),
      cc,i=1,item,
      p=$('<div id="pagination"></div>').append($('<a/>').text('['+1+']').data({i:0}));

      o.before(p);


  do{
      if(typeof cc=='undefined'){cc=c.clone().appendTo(o);}


    item=o.children().not('.part').first().appendTo(cc.first());

    if(cc.children().length>0 && cc.height()>=h)
    {
      p.append($('<a/>').data({i:i++}).text('['+(i)+']'));
      cc=c.clone().appendTo(o).append(item);
    }
  }while($('#paginate').first().children().not('.part').length>0);

  if($('.part',o).length<2){p.remove();return;}
  $('.part',o).not(':eq(0)').hide();
    $('a',p).click(function(){
      var _this=$(this);
      $('a',_this.parent()).removeClass('current');
      _this.addClass('current');

      $('#paginate>.part').hide().eq(_this.data('i')).show();
      }).first().addClass('current');


  return;
});
            </script>

这是列表更新的外部...

$(document).ready(function() {
    $newItemField = $('#newItem');
    $addButton = $('#add');
    $('ol').sortable();
    $('li').append('<span class="delete">x</span');
    $('ol').delegate('li','mouseover mouseout',function() {
        $(this).toggleClass('hovered');
    });
    $('ol').delegate('li>.delete','mouseover mouseout',function() {
        $(this).toggleClass('hovered');
    });
    $('ol').on('click','li>.delete',function(){
        $(this).parent().remove();
    });
    $newItemField.keypress(function(e) {
        if (e.which == 13) {
            addItem();
        }
    });
    $addButton.click(function() {
        addItem();
    });
});
function addItem() {
    if ($newItemField.val() !== '') {
        $newItem = $('<li/>');
        $newItem.text($newItemField.val());
        $deleteButton = $('<span/>').text('x').addClass('delete');
        $newItem.append($deleteButton);
        $newItem.css('background-color','#e4ffef');
        $newItem.appendTo('ol');
        $newItem.animate({backgroundColor:'#FFFFFF'},5000);
        $newItemField.val('');
    }
}

我现在有一个要通过输入更新的任务列表，并将其放入一个 OL 中，该 OL 效果很好，并且与分页一起使用效果很好，但将项目放在第二页上....

有什么想法吗？

Answer 1

这是因为 ol 元素位于 paginate div 的第二个元素内。 请参阅下文(渲染后即可看到)。

<div id="paginate">
  <div class="part" style="width: 960px;"></div>
  <div class="part" style="width: 960px; display: none;">
    <ol class="ui-sortable"></ol>
  </div>
  <div class="part" style="width: 960px; display: none;"></div>
</div>

因此，放置下面的代码将达到预期效果并按预期工作。

$(".ui-sortable").appendTo("#paginate div:first-child");

现在正在运行... http://jsfiddle.net/iashu/Nty7M/