Cách tạo phân trang như trang web Stack Overflow

Question

cách tạo phân trang như stackoverflow?

Answer 1

Bạn không nói công nghệ phía máy chủ nào bạn đang sử dụng nhưng nếu bạn muốn có giải pháp phía khách hàng thuần túy, bạn có thể xem plugin jQuery Pagination. Đây là demo page.

Answer 2

sử dụng jQuery Plugin pagination:

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

Answer 3

Chỉ cần bao gồm jquery và jquery pagination plugin trong trang của bạn và sử dụng này,

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

Bạn có thể tạo pagination sử dụng twitter bootstrap với ít hơn 10 dòng mã như thế này

Answer 6

bạn có thể sử dụng chức năng này quá:

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