Как создать нумерацию страниц, как на сайте Stack Overflow

Question

как создать нумерацию страниц, как stackoverflow?

Answer 1

Вы не сказали, какую серверную технологию вы используете, но если вы хотите получить чистое клиентское решение, вы можете взглянуть на плагин jQuery Pagination . Вот демоверсия .

Answer 2

Просто включите плагин jquery и jquery pagination на свою страницу и используйте это,

$(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

Вы можете создать нумерацию страниц, используя загрузчик Twitter , используя менее 10 строк кода, как это

Answer 4

Используйте нумерацию плагинов Jquery:

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

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

Answer 6

Это прекрасно работает для меня. Поскольку это не javascript, пользователи с отключенным javascript могут использовать его тоже.