分页替代方案

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）

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

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

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

Answer 5

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

http://jobcloud.cz/glPagiSmart.jc

但我不确定有多少人真正想要使用十六进制或二进制实现:)