How to create pagination as a site

Question

how to create pagination like stackoverflow?

Answer 1

You did not say which server technology you are using, but if you want to use a clean client solution, you can take a look at the jQuery Pagination plugin. Here is a demo page .

Answer 2

Just enable the plugin for jQuery and jquery pagination on your page and use this,

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

Use jquery plugin splitting:

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

Answer 4

You can create pagination using twitter bootstrap with less than 10 lines of code like this

Answer 5

This works great for me. Since this is not javascript, users with javascript disabled can also use it.

Answer 6

You can also use this function:

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