asp.net - 分页标准

Question

有谁知道分页的定义标准？我们有一家咨询公司为我们建立了一个网站，并且该网站的一部分有一个使用分页的项目列表。它们有一个非常标准的分页布局，由数字列表（链接）两侧的两个按钮组成。

[<<]  [<]   1   2   3   4   5   [>]  [>>]

按钮 [<] 和 [>] 可让您浏览页面，无论是后退还是前进。这些数字都是指向页面的直接链接。

我遇到的问题是带有双“箭头”的按钮。我认为这些应该将您带到第一页或最后一页。这里的每个人都同意这一点，并期望它以这种方式工作。但是，设计该网站的公司有这些按钮可以向前或向后跳 10 页。我从来没有见过这样的做法，所以预期的行为不是我和其他用户所期望的。这个网站昨晚刚刚上线，我们已经有 3 位用户将此功能报告为错误。

有一套标准我可以用来向顾问展示吗？他们不想更改此功能。

提前致谢。

Answer 1

分页标准的问题是最好的解决方案真的取决于：

• 分页的内容
• 结果集的大小
• 遍历结果集的性能和技术可行性

在您的特定情况下，我不希望双箭头移动 10。这可能比第一个/最后一个更有用，但是应该以某种方式向用户显示任意 10 值。

以下是一些 UI 分页示例：

• 分页画廊：示例和良好实践
• Twitter 引导分页
• 雅虎搜索分页

Answer 2

我从来没有听说过像标准这样的东西，但我总是按照你描述的方式编码。如果您的页面数量相对较多，但对于非常大的数量，我可以看到 forward 10 很有用。但是，如果您有那么多页面，那么用户无论如何都不太可能翻阅数据。在这种情况下需要搜索。无论如何，一位顾问告诉您您错了，您似乎应该寻找一位新顾问。他们可能不同意（我可以看到他们的论点），但你应该有最终决定权......

Answer 3

就个人而言，我认为最左边和最右边的按钮应该分别移动到第一页和最后一页。但是，我也认为制造它的公司考虑到他们使用的是双箭头，因此使用了正确的行为。对我来说，双箭头表示它与单箭头的作用相同，但更多。换句话说，我认为双箭头向左或向右移动 10 页是有道理的，因为单箭头向左或向右移动 1 页。

基本上：

• 我同意所用符号的行为。
• 我不同意符号的选择。在大多数情况下，我认为单箭头 + 垂直线（ l< 和 >l ）会更清楚，但这只是我个人的看法。

Answer 4

这是我最近构建的分页控件的代码，具有以下优点：

• 第一页和最后一页页码始终可见（不需要 [<<] 或 [>>] 按钮）
• 单击 [...] 可以快速跳转到任何页面
• 没有要本地化的单词（不需要下一个、上一个、第一个、最后一个按钮，因为控件很清晰）
• 没有依赖项（不需要 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>