I have come across the following code that looks at divs contained inside divWiz

Question

0

Asked: May 26, 20262026-05-26T22:12:43+00:00 2026-05-26T22:12:43+00:00

I have come across the following code that looks at divs contained inside divWiz

0

I have come across the following code that looks at divs contained inside divWiz and separates them into two halves which the user can switch between.

This is all well and good, but what about if I wanted to make it more dynamic? By that I mean throwing in some pagination.

Using the code below you see that I am generating 50 divs. The code splits them into two even sets of 25 that can be swtiched between using the Next and Previous buttons.

See jsfiddle for working example

Now lets say I want to limit the number of shown divs to 10 instead of 50. I have no idea how to get the navigation between these sets of 10 to generate.

Basically, instead of Next and Previous, I want to see Page: 1, 2, 3, 4, etc

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();        
});        
});