如何像 Stack Overflow 网站一样创建分页答案

【问题标题】：How to create pagination like Stack Overflow site如何像 Stack Overflow 网站一样创建分页
【发布时间】：2011-02-09 23:38:34
【问题描述】：

如何创建类似stackoverflow的分页？

【问题讨论】：

为什么特别是 Stack Overflow？它与任何其他形式的分页有什么不同吗？
据我所知，Stack Overflow 的分页完全是服务器端的：它与 Javascript 或 jQuery 无关。
它的客户端分页，如果您在浏览器中禁用 javascript，您会看到这条消息“Stack Overflow 在启用 JavaScript 的情况下效果最佳”并且所有页面都显示在一个页面中
@user1400：虽然它在禁用 javascript 时会显示该消息，但分页仍然有效。
显然，它没有将 600k 问题下载到浏览器。

标签： javascript jquery pagination

【解决方案1】：

您没有说您使用的是什么服务器端技术，但如果您想要一个纯客户端解决方案，您可以查看jQuery Pagination 插件。这是demo page。

【讨论】：

【解决方案2】：

只需在您的页面中包含 jquery 和 jquery 分页插件并使用它，

$(document).ready(function() {
  $(".pager").pagination(300, {
    callback: pagecallback,
    current_page: 0,
    items_per_page: 5,
    num_display_entries: 5,
    next_text: 'Next',
    prev_text: 'Prev',
    num_edge_entries: 1
  });
});

.pager {
  margin-bottom: 10px;
  margin-top: 10px;
}
.page-numbers {
  border: 1px solid #CCCCCC;
  color: #808185;
  display: block;
  float: left;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: 130%;
  margin-right: 3px;
  padding: 4px 4px 3px;
  text-decoration: none;
}
.page-numbers.desc {
  border: medium none;
}
.page-numbers:hover {
  text-decoration: none;
}
.pager a {
  color: #808185;
  cursor: pointer;
  text-decoration: none;
  outline: none;
}
.pager a:hover {
  text-decoration: underline;
}
.pager a:visited {
  color: #808185;
  outline: none;
}
.page-numbers.next,
.page-numbers.prev {
  border: 1px solid #CCCCCC;
}
.page-numbers.current {
  background-color: #808185;
  border: 1px solid #808185;
  color: #FFFFFF;
  font-weight: bold;
}
.page-numbers.dots {
  border: 1px solid #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pager" id="Pagination">
  <!-- the container for your first pagination area -->
</div>

【讨论】：

【解决方案3】：

使用Jquery插件分页：

http://plugins.jquery.com/project/pagination

【讨论】：

哦，好吧。我只检查 jquery 分页链接，它给出不同的 url，所以只有我提供 jquery 主插件 url。现在我验证它是演示页面链接。好吧好吧。

【解决方案4】：

您可以使用twitter bootstrap 使用少于 10 行这样的代码创建分页

【讨论】：

【解决方案5】：

This works very great for me. Since this is no javascript, users with javascript disabled can use it too.

【讨论】：

【解决方案6】：

你也可以使用这个功能：

function makePaging(totalPages, pageIndex) {
    var oPaging, i, j, k;
    var totalPages = parseInt(totalPages);

    pageIndex++;

    i = pageIndex;
    j = pageIndex - 1;
    k = pageIndex + 1;

    var oBefore, oAfter;
    oBefore = "";
    oAfter = "";

    while (j != 0 && j != i - 6) {
        oBefore = "<a class='Page' href='#' data-index='" + (j - 1) + "'>" + j + "</a>&nbsp;" + oBefore;
        j--;
    }

    for (; k < totalPages + 1 && k < i + 6; k++) {
        oAfter += "<a class='Page' href='#' data-index='" + (k - 1) + "'>" + k + "</a>&nbsp;";
    }

    oPaging = oBefore + "<a class='CurPage' href='#' rel='' style='color:Red;'>" + i.toString() + "</a>&nbsp;" + oAfter;

    return oPaging;
}

【讨论】：