分頁，李物品如何添加與jQuery

Question

http://jsfiddle.net/2NHLZ/2/

我想實現在一個無序列表分頁。我正在使用mvc。
其實我想要得到的網頁鏈接，如：

<ul id="page_navigation"> 
      <li><a href="~/Main/Index?p=1">&laquo;</a></li> 
      <li><a href="~/Main/Index?p=2">@pcount</a></li> 
       . 
       . 

      <li><a href="~/Main/Index?p=5">&raquo;</a></li> 
    </ul> 

我jQuery代碼是在小提琴，在這裏我把我的li在此jQuery的..（而不是A HREF我想把李和正確的頁面鏈接）以及我如何設置上一個和下一個鏈接。我不能使用任何插件這個...

Answer 1

希望這是你想要什麼：

$(document).ready(function(){ 

    //how much items per page to show 
    var show_per_page = 10; 
    var number_of_items = 120; 
    var next_page, prv_page, 
     path = 'yourpath/path?p='; 

    //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); 

    // Modify the page according to $('#current_page').val() 
    prv_page = isNaN (parseInt($('#current_page').val())) ? 0 : parseInt($('#current_page').val()) - 1; 

    var navigation_html = '<a class="previous_link" href="'+path+prv_page+'">Prev</a>'; 
    var current_link = 0; 
    while(number_of_pages > current_link){ 
     navigation_html += '<a class="page_link" href="' + path + current_link +'" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>'; 
     current_link++; 
    } 

    // Modify the page according to $('#current_page').val() 
    next_page = isNaN(parseInt($('#current_page').val())) ? 0 + 1 : parseInt($('#current_page').val()) + 1; 
    navigation_html += '<a class="next_link" href="'+path+next_page+'">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'); 

});