Question

我正在寻找分页选择的想法。我知道2个分页方案：

点击页面分页 - my favorite example
无限滚动分页 - 一个似乎有用的实现here

必须有一些其他不太知名/流行的方法来做到这一点。如果您可以提供演示链接

，则可获得奖励积分

由于

Answer 1

我认为分页的一个很好的替代方法是让用户告诉服务器他们正在寻找什么的一种方式或多种方式。对于某些类型的内容（例如，大量文本，例如来自研究论文或虚构作品），当然你可能会遇到分页问题。但是当内容可以自然搜索时（比如支票账户交易表），好的，简单的过滤工具可能比分页方案更有用。（实际上你可能需要两者。）

Answer 2

我使用了GWT混合技术，它进行了“无限滚动”，但一次只显示了一个“窗口/页面”信息。因此，它只在任何给定时间向浏览器加载固定数量的数据。如果您可以显示20个项目并滚动它，则一次只更新列表20个项目。没有分页的分页，滚动而不滚动。

当然，这是实际实现的一个微不足道的定义，它比这听起来更聪明，并且非常适合往返行程。这是一个已经使用搜索条件过滤掉的结果列表。它们齐头并进。

Answer 3

看看'对数'分页，如我在这里的回答所述：

How to do page navigation for many, many pages? Logarithmic page navigation

这就像常规分页一样，但解决了在“...”范围中间访问页面而没有多次重复鼠标点击的问题。即如果这些是您的链接，需要多长时间才能从10380中获取第2456页：1 2 3 4 5 ... 10376 10377 10378 10379 10380？

（但是，Pointy有，嗯......还有一点（！））

Answer 4

这是我最近构建的纯JavaScript分页控件的代码。它与您最喜欢的有这些额外的好处......

单击...允许快速跳转到任何页面
没有文字意味着没有本地化（下一个，上一个，第一个，最后一个按钮不是在这个简单的控制中需要）
没有依赖项（不需要jQuery）

＆＃13;

var Pagination = {
  code: '',

  Extend: function(data) {
    data = data || {};
    Pagination.size = data.size || 300;
    Pagination.page = data.page || 1;
    Pagination.step = data.step || 3;
  },

  Add: function(s, f) {
    for (var i = s; i < f; i++) {
      Pagination.code += '<a>' + i + '</a>';
    }
  },

  Last: function() {
    Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
  },

  First: function() {
    Pagination.code += '<a>1</a><i>...</i>';
  },


  Click: function() {
    Pagination.page = +this.innerHTML;
    Pagination.Start();
  },

  Prev: function() {
    Pagination.page--;
    if (Pagination.page < 1) {
      Pagination.page = 1;
    }
    Pagination.Start();
  },

  Next: function() {
    Pagination.page++;
    if (Pagination.page > Pagination.size) {
      Pagination.page = Pagination.size;
    }
    Pagination.Start();
  },

  TypePage: function() {
    Pagination.code = '<input onclick="this.setSelectionRange(0, this.value.length);this.focus();" onkeypress="if (event.keyCode == 13) { this.blur(); }" value="' + Pagination.page + '" /> &nbsp; / &nbsp; ' + Pagination.size;
    Pagination.Finish();
    var v = Pagination.e.getElementsByTagName('input')[0];
    v.click();
    v.addEventListener("blur", function(event) {

      var p = parseInt(this.value);

      if (!isNaN(parseFloat(p)) && isFinite(p)) {
        if (p > Pagination.size) {
          p = Pagination.size;
        } else if (p < 1) {
          p = 1;
        }
      } else {
        p = Pagination.page;
      }

      Pagination.Init(document.getElementById('pagination'), {
        size: Pagination.size,
        page: p,
        step: Pagination.step
      });
    }, false);
  },


  Bind: function() {
    var a = Pagination.e.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
      if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
      a[i].addEventListener('click', Pagination.Click, false);
    }
    var d = Pagination.e.getElementsByTagName('i');
    for (i = 0; i < d.length; i++) {
      d[i].addEventListener('click', Pagination.TypePage, false);
    }
  },

  Finish: function() {
    Pagination.e.innerHTML = Pagination.code;
    Pagination.code = '';
    Pagination.Bind();
  },

  Start: function() {
    if (Pagination.size < Pagination.step * 2 + 6) {
      Pagination.Add(1, Pagination.size + 1);
    } else if (Pagination.page < Pagination.step * 2 + 1) {
      Pagination.Add(1, Pagination.step * 2 + 4);
      Pagination.Last();
    } else if (Pagination.page > Pagination.size - Pagination.step * 2) {
      Pagination.First();
      Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
    } else {
      Pagination.First();
      Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
      Pagination.Last();
    }
    Pagination.Finish();
  },


  Buttons: function(e) {
    var nav = e.getElementsByTagName('a');
    nav[0].addEventListener('click', Pagination.Prev, false);
    nav[1].addEventListener('click', Pagination.Next, false);
  },

  Create: function(e) {
    var html = [
      '<a>&#9668;</a>', // previous button
      '<span></span>', // pagination container
      '<a>&#9658;</a>' // next button
    ];
    e.innerHTML = html.join('');
    Pagination.e = e.getElementsByTagName('span')[0];
    Pagination.Buttons(e);
  },

  Init: function(e, data) {
    Pagination.Extend(data);
    Pagination.Create(e);
    Pagination.Start();
  }
};

var init = function() {
  Pagination.Init(document.getElementById('pagination'), {
    size: 30, // pages size
    page: 1, // selected page
    step: 2 // pages before and after current
  });
};

document.addEventListener('DOMContentLoaded', init, false);

＆＃13;

html {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
}
body:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
#pagination {
  display: inline-block;
  vertical-align: middle;
  padding: 1px 2px 4px 2px;
  font-size: 12px;
  color: #7D7D7D;
}
#pagination a,
#pagination i {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  color: #7D7D7D;
  text-align: center;
  padding: 4px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#pagination a {
  margin: 0 2px 0 2px;
  cursor: pointer;
}
#pagination a:hover {
  background-color: #999;
  color: #fff;
}
#pagination i {
  border: 2px solid transparent;
  cursor: pointer;
}
#pagination i:hover {
  border: 2px solid #999;
  cursor: pointer;
}
#pagination input {
  width: 40px;
  padding: 2px 4px;
  color: #7D7D7D;
  text-align: right;
}
#pagination a.current {
  border: 1px solid #E9E9E9;
  background-color: #666;
  color: #fff;
}

＆＃13;

<div id="pagination"></div>

＆＃13;

Answer 5

这里有一个很酷的对数分页解决方案：

http://jobcloud.cz/glPagiSmart.jc

但我不确定有多少人真的想要使用十六进制或二进制实现：）

分页替代品

5 个答案: