Cómo crear una paginación como Stack Overflow sitio

Question

cómo crear paginación como stackoverflow?

Answer 1

No dijo qué tecnología del lado del servidor está utilizando, pero si desea una solución pura del lado del cliente, puede echar un vistazo al complemento jQuery Pagination. Aquí hay un demo page.

Answer 2

usar jQuery plugin de paginación:

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

Answer 3

basta con incluir jQuery y jQuery plugin de paginación en su página y usar esto,

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

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

Answer 5

Puede crear paginación usando twitter bootstrap con menos de 10 líneas de código como este

Answer 6

puede utilizar esta función también:

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