Javascript 如何创建像 Stack Overflow 站点一样的分页

How to create pagination like Stack Overflow site

提问by user1400

how to create pagination like stackoverflow?

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

回答by Darin Dimitrov

You didn't say what server side technology you are using but if you want a pure client side solution you may take a look at the jQuery Paginationplugin. Here's a demo page.

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

回答by ACP

Just include jquery and jquery pagination plugin in your page and use this,

只需在您的页面中包含 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>

回答by Karthik

Use Jquery plugin pagination:

使用 Jquery 插件分页：

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

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

回答by Nisham Mahsin

You can create pagination using twitter bootstrapwith less than 10 line of code like this

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

回答by Mohamad Shiralizadeh

you can use this function too:

您也可以使用此功能：

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

回答by TMNuclear

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

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