Question

我遇到了以下代码，它们查看divWiz中包含的div，并将它们分成两半，用户可以在它们之间切换。

这一切都很好，但是如果我想让它变得更有活力呢？我的意思是抛出一些分页。

使用下面的代码，您会看到我正在生成50个div。代码将它们分成两组，每组25个，可以使用Next和Previous按钮进行交换。

现在假设我想将显示的div的数量限制为10而不是50.我不知道如何在这些10组之间进行导航以生成。

基本上，我不想使用Next和Previous，而是希望看到Page：1,2,3,4等

HTML

<input value=" Next " type="button"/>
<input value=" Prev " type="button"/>
<input value=" Show All " type="button"/>
<div id="divWiz"></div>

的Javascript

$(function() {
var i, cutoff, total = 50;
for(i=0; i<total; ++i)
    $(document.createElement("div")).html(i).appendTo("#divWiz");

cutoff = total/2;

$("#divWiz > div").hide();
$("#divWiz > div:lt("+cutoff+")").show();

$("input[value=' Next ']").click(function() {       
    $("#divWiz > div").hide();        
    $("#divWiz > div:gt("+(cutoff - 1)+")").show();
});

$("input[value=' Prev ']").click(function() {       
    $("#divWiz > div").hide();        
    $("#divWiz > div:lt("+cutoff+")").show();    });    

$("input[value=' Show All ']").click(function() {       
    $("#divWiz > div").show();        
});        
});

Answer 1

我建议你看看其中一个分页插件。一些轻量级的例子：

http://geckohub.com/jquery/simplepager/

http://www.jquery4u.com/demos/jquery-quick-pagination/

更多：

http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/

jQuery计数div和隐藏一些......动态？

1 个答案: