如何创建类似于Stack Overflow网站的分页功能

Question

如何创建类似stackoverflow的分页？

- user1400

---

为什么特别选择Stack Overflow？它与其他任何分页形式有什么不同吗？ - nickf

据我所见，Stack Overflow的分页完全是服务器端实现的：与Javascript或jQuery无关。 - Dean Harding

@user1400：尽管JavaScript被禁用时会显示该消息，但分页仍然可以正常工作。 - Dean Harding

显然，这不是将600k个问题下载到浏览器中。 - Daniel Vassallo

@codeka，你是对的，当JavaScript被禁用时，分页功能可以正常工作。 - user1400

Answer 1

您没有说明使用的服务器端技术，但如果您想要一个纯客户端解决方案，可以看一下jQuery Pagination插件。这里有一个演示页面。

- Darin Dimitrov

Answer 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>

- ACP

Answer 3

使用Jquery插件分页：

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

- Karthik

---

好的，我只检查了jQuery分页链接，它给出了不同的URL，所以我只提供了jQuery主插件的URL。现在我已经验证了它是演示页面链接。好的。 - Karthik

Answer 4

你可以使用 Twitter Bootstrap 创建分页，只需不到10行代码，就像这样：。

- Nisham Mahsin

Answer 5

你也可以使用这个函数：

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

- Mohamad Shiralizadeh

Answer 6

这对我非常有效。由于它不是JavaScript，禁用JavaScript的用户也可以使用它。

- TMNuclear