Question

我正在尝试在无序列表中实现分页。我正在使用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中...（而不是href我想把那个li和正确的页面链接）以及我如何设置上一个和下一个链接。我不能使用任何插件 ...

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

});

分页，如何使用jQuery添加项目

1 个答案: