如何创建类似Stack Overflow站点的分页

Question

如何创建像stackoverflow这样的分页？

Answer 1

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

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>

​

Answer 3

使用Jquery插件分页：

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