So erstellen Sie Seitenumbruch wie die Stapelüberlauf-Site

Question

Wie erstellt man Seitenumbruch wie Stackoverflow?

Answer 1

Sie haben nicht gesagt, welche serverseitige Technologie Sie verwenden, aber wenn Sie eine reine clientseitige Lösung möchten, können Sie sich das jQuery Pagination Plugin ansehen. Hier ist ein demo page.

Answer 2

Verwendung JQuery Plugin Paginierung:

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

Answer 3

Gerade umfassen jquery und jquery Paginierung Plugin auf Ihrer Seite und nutzen diese,

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

Sie können Paginierung erstellen twitter bootstrap mit weniger als 10 Codezeilen wie diese zu

Answer 6

Sie diese Funktion verwenden kann:

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