Tạo số trang bằng javascript/jquery?

Question

Cách tạo số trang như dưới đây bằng cách sử dụng javascript/jquery?

Nếu trang thứ 5 được chọn tôi có để hiển thị 3,4 và 6,7 và cũng 1, trang cuối cùng với trước, bên cạnh ... gợi Bất kỳ ....

EDIT:

Làm cách nào để làm việc với dữ liệu json sử dụng div phân trang này? (tức là) Dữ liệu json của tôi chứa 50 bản ghi Tôi muốn 10 ở trang 1 và cứ thế ... Cách phân trang dữ liệu json với những số này ...

Tôi muốn có chức năng jquery để vượt qua currentpageno,lastpagenumber và chức năng nên tạo cho tôi số trang như dưới đây cho tôi

Nếu nó là trang đầu tiên

istpage http://img156.imageshack.us/img156/2527/1pagel.jpg

Nếu đó là ở giữa,

Pager http://img98.imageshack.us/img98/7278/pagersy.jpg

Nếu đó là trang cuối cùng,

lastpage http://img204.imageshack.us/img204/541/lastpage.jpg

EDIT Thứ hai:

Tôi đã thử chức năng này nhưng dường như không để có được kết quả mong muốn

function generatePages(currentPage, LastPage) { 
    if (LastPage <= 5) { 
     var pages = ''; 
     for(var i=1;i<=5;i++) 
     { 
      pages += "<a class='page-numbers' href='#'>" + i + "</a>" 
     } 
     $("#PagerDiv").append(pages); 
    } 
    if (LastPage > 5) { 
     var pages = ''; 
     for (var i = 1; i <= 5; i++) { 
      pages += "<a class='page-numbers' href='#'>" + i + "</a>" 
     } 
     $("#PagerDiv").append(pages); 
    } 
} 

Tôi có các giá trị lastPage và currentPage, hãy giúp tôi nhận này ...

Answer 1

gì bạn đang tìm kiếm được gọi là "pagination" và có (như mọi khi) một plugin jQuery mà không được công việc dành cho bạn:

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

(Tải về nó here)

---

Edit: Vì bạn dường như không có khả năng để làm cho nó làm việc, đây là một cách (một số khác nhau) làm thế nào bạn có thể sử dụng các plugin.

Bước 1: Tạo đánh dấu từ JSON-dữ liệu của bạn như sau:

<div id="display"> 
    <!-- This is the div where the visible page will be displayed --> 
</div> 

<div id="hiddenData"> 
    <!-- This is the div where you output your records --> 
    <div class="record"> 
     <!-- create one record-div for each record you have in your JSON data --> 
    </div> 
    <div class="record"> 
    </div> 
</div> 

Ý tưởng là để sao chép bản ghi tương ứng với div hiển thị khi nhấp chuột vào một trang liên kết. Do đó, plugin cung cấp chức năng gọi lại pageSelect-callback. Bước 2 là để thực hiện chức năng này, ví dụ:

function pageselectCallback(pageIndex, jq){ 
    // Clone the record that should be displayed 
    var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone(); 
    // Update the display container 
    $('#display').empty().append(newContent); 
    return false; 
} 

Điều này có nghĩa rằng bạn có một trang cho mỗi bản ghi. Nếu bạn muốn hiển thị nhiều bản ghi trên mỗi trang, bạn phải sửa đổi hàm trên cho phù hợp.

Bước thứ ba và cuối cùng là khởi tạo toàn bộ nội dung chính xác.

function initPagination() { 
    // Hide the records... they shouldn't be displayed 
    $("#hiddenData").css("display", "none"); 
    // Get the number of records 
    var numEntries = $('#hiddenData div.result').length; 
    // Create pagination element 
    $("#pagination").pagination(numEntries, { 
     num_edge_entries: 2, 
     num_display_entries: 8, // number of page links displayed 
     callback: pageselectCallback, 
     items_per_page: 1 // Adjust this value if you change the callback! 
    }); 
} 

Vì vậy, bạn chỉ cần tạo đánh dấu HTML từ dữ liệu JSON của mình và gọi hàm init sau đó.

Nó không phải là khó khăn, phải không?

Answer 2

yeah @SLaks là đúng. không có gì quá điên rồ ở đây. Bạn sẽ có 2 biến currentPageNumber và lastPageNumber.

$("div.paginator").append("<a...>prev</a>"); 
$("div.paginator").append("<a...>1</a>"); 

for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) { 
    $("div.paginator").append("<a...>"+ x +"</a>"); 
} 

$("div.paginator").append("<a...>"+ lastPageNumber +"</a>"); 
$("div.paginator").append("<a...>next</a>"); 

// you could apply styles to and a tag in the div.paginator 
// you could apply a special class to the a tag that matches the currentPageNumber 
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to 

Answer 3

Sử dụng THIS hoặc THAT plugin. Cả hai đều là plugin bổ sung html dễ dàng. Đặt mọi thứ trong html cùng một lúc và phân trang với một trong số đó.

Answer 4

Thêm hai đầu vào ẩn mới

<input type='hidden' id='current_page' /> 
<input type='hidden' id='show_per_page' /> 

Tiếp theo, thêm một div trống để tạo điều khiển pagination

<!-- An empty div which will be populated using jQuery --> 
<div id='page_navigation'></div> 

$(document).ready(function(){ 

    //how much items per page to show 
    var show_per_page = 5; 
    //getting the amount of elements inside content div 
    var number_of_items = $('#content').children().size(); 
    //calculate the number of pages we are going to have 
    var number_of_pages = Math.ceil(number_of_items/show_per_page); 

    //set the value of our hidden input fields 
    $('#current_page').val(0); 
    $('#show_per_page').val(show_per_page); 

    //now when we got all we need for the navigation let's make it ' 

    /* 
    what are we going to have in the navigation? 
     - link to previous page 
     - links to specific pages 
     - link to next page 
    */ 
    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>'; 
    var current_link = 0; 
    while(number_of_pages > current_link){ 
     navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>'; 
     current_link++; 
    } 
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>'; 

    $('#page_navigation').html(navigation_html); 

    //add active_page class to the first page link 
    $('#page_navigation .page_link:first').addClass('active_page'); 

    //hide all the elements inside content div 
    $('#content').children().css('display', 'none'); 

    //and show the first n (show_per_page) elements 
    $('#content').children().slice(0, show_per_page).css('display', 'block'); 

}); 

function previous(){ 

    new_page = parseInt($('#current_page').val()) - 1; 
    //if there is an item before the current active link run the function 
    if($('.active_page').prev('.page_link').length==true){ 
     go_to_page(new_page); 
    } 

} 

function next(){ 
    new_page = parseInt($('#current_page').val()) + 1; 
    //if there is an item after the current active link run the function 
    if($('.active_page').next('.page_link').length==true){ 
     go_to_page(new_page); 
    } 

} 
function go_to_page(page_num){ 
    //get the number of items shown per page 
    var show_per_page = parseInt($('#show_per_page').val()); 

    //get the element number where to start the slice from 
    start_from = page_num * show_per_page; 

    //get the element number where to end the slice 
    end_on = start_from + show_per_page; 

    //hide all children elements of content div, get specific items and show them 
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block'); 

    /*get the page link that has longdesc attribute of the current page and add active_page class to it 
    and remove that class from previously active page link*/ 
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page'); 

    //update the current page input field 
    $('#current_page').val(page_num); 
}