添加下一個/上一個按鈕Pagenation

Question

如何添加下一個/上一個按鈕到這個片段。我其實不想要數字。

var itemsPerPage = 4; 


var $entries = $("#entries"); 
var $list = $entries.children("ul:first"); 
$list.children().eq(itemsPerPage).nextAll().andSelf().hide(); 

var $pagination = $("<ul class='pagination'></ul>").each(function() { 
    var itemsTotal = $list.children().size(); 
    var pages = Math.ceil(itemsTotal/itemsPerPage); 
    for (var i = 1; i <= pages; i += 1) { 
     $(this).append("<li>" + i + "</li>"); 
    } 
}).appendTo($entries); 
$pagination.children("li:first").addClass("selected"); 
$pagination.children().click(function() { 
    if ($(this).is(".selected")) { 
     return; 
    } 
    var page = $(this).index() + 1; 
    var firstToShow = (page - 1) * itemsPerPage; 
    var lastToShow = page * itemsPerPage; 
    $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow'); 
    $(this).addClass("selected").siblings(".selected").removeClass("selected"); 
}); 

Answer 1

沒有數字（在頁變量需要成爲全球爲了能夠管理你的頁面目前）：

$(document).ready(function() { 

    var page = 1; 
    var itemsPerPage = 4; 
    var prev = "<<"; 
    var next = ">>"; 

    var $entries = $("#entries"); 
    var $list = $entries.children("ul:first"); 
    $list.children().eq(itemsPerPage).nextAll().andSelf().hide(); 

    var $pagination = $("<ul class='pagination'></ul>").each(function() { 
     var itemsTotal = $list.children().size(); 
     var pages = Math.ceil(itemsTotal/itemsPerPage); 
     $(this).append("<li>" + prev + "</li>"); 
     $(this).append("<li>" + next + "</li>"); 
    }).appendTo($entries); 
    $pagination.children("li:first").hide(); 
    $pagination.children().click(function() { 

     if ($(this).text() == prev) 
      page = page - 1; 
     else if ($(this).text() == next) 
      page = page + 1; 

     var firstToShow = (page - 1) * itemsPerPage; 
     var lastToShow = page * itemsPerPage; 
     $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow'); 
     $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected"); 

     if (page == 1) 
      $(this).parent().find("li:first").hide(); 
     else 
      $(this).parent().find("li:first").show(); 
     if (page == Math.ceil($list.children().size()/itemsPerPage)) 
      $(this).parent().find("li:last").hide(); 
     else 
      $(this).parent().find("li:last").show(); 
    }); 
}); 

用數字（你是哪個頁面目前可以繼續通過。選擇類管理：

$(document).ready(function() { 

    var itemsPerPage = 4; 
    var prev = "<<"; 
    var next = ">>"; 

    var $entries = $("#entries"); 
    var $list = $entries.children("ul:first"); 
    $list.children().eq(itemsPerPage).nextAll().andSelf().hide(); 

    var $pagination = $("<ul class='pagination'></ul>").each(function() { 
     var itemsTotal = $list.children().size(); 
     var pages = Math.ceil(itemsTotal/itemsPerPage); 
     $(this).append("<li>" + prev + "</li>"); 
     for (var i = 1; i <= pages; i += 1) { 
      $(this).append("<li>" + i + "</li>"); 
     } 
     $(this).append("<li>" + next + "</li>"); 
    }).appendTo($entries); 
    $pagination.children("li:first").hide(); 
    $pagination.children("li:eq(1)").addClass("selected"); 
    $pagination.children().click(function() { 

     if ($(this).is(".selected")) { return; } 

     var page; 
     var selectedNode = $(this).parent().find(".selected"); 
     if ($(this).text() == prev) 
      page = selectedNode.index() - 1; 
     else if ($(this).text() == next) 
      page = selectedNode.index() + 1; 
     else 
      page = $(this).index(); 

     var firstToShow = (page - 1) * itemsPerPage; 
     var lastToShow = page * itemsPerPage; 
     $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow'); 
     $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected"); 

     if (page == 1) 
      $(this).parent().find("li:first").hide(); 
     else 
      $(this).parent().find("li:first").show(); 
     if (page == Math.ceil($list.children().size()/itemsPerPage)) 
      $(this).parent().find("li:last").hide(); 
     else 
      $(this).parent().find("li:last").show(); 
    }); 
});