CODEWITHSUNDEEP
javascriptjqueryforeachpagination
Edward144
Edward144

Reputation: 493

jQuery simple pagination

I have several ul's, and I want to only display 1 at a time with a previous and next button to cycle through them.

I'm using a foreach with PHP to generate each ul with a maximum of 6 li's. As well as to get a unique id for each (itemX).

<ul class="itemWrap" id="itemX">
    <li>Item 1</li>
    <li>Item 2</li>
    // ETC
</ul>

I want to use jquery to set all 'itemWrap' to display none, then set id 'item1' to display block on page load.

Then when clicking the next/prev buttons set the current ul to display none and set the next/prev ul to display block.

jQuery(document).ready(function(){
jQuery(".itemWrap").css("display", "none");
jQuery("#item1").css("display", "block");

var count = 1;
var item = jQuery("#item" + count);

jQuery(".prev").click(function(){
    // do previous tab

    jQuery.each(item, function() {
        item.css("display", "none");
    });

    count--;

    jQuery.each(item, function() {
        item.css("display", "block");
    });
});

jQuery(".next").click(function(){
    // do next tab

    jQuery.each(item, function() {
        item.css("display", "none");
    });

    count++;

    jQuery.each(item, function() {
        item.css("display", "block");
    });
});});

This is what I have, it works to set the current ul to display none, but only if there is nothing telling it to set the next/previous ul to display block.

Upvotes: 0

Views: 1667

Answers (3)

Vadim Makarenko
Vadim Makarenko

Reputation: 1

Or you can use my jquery plugin.

$(document).ready(function{
function loadPaging_content(offset_data){
    var offset;//default value page button
    if(offset_data){
        offset = offset_data;
    }else{
        offset = 0;
    }
    var items = 10;//example
    $('your LoadPage selector(In this div load Page)').xhrPagination({
        sel: 'selector',//In this div created paging Links
        totalCount: 'selector OR Number', 
        items: items
        }, 
        {
            url:'//your URL', 
            dataLP:{offset: offset, items:items}
        }
    );
}
});

Here is Link: https://github.com/WadimMakarenko/jquery-simple_ajax

Upvotes: 0

Ashokbharathi
Ashokbharathi

Reputation: 146

Please see if it help for you. here is your javascript

$(document).ready(function(){

$("#item1").addClass("active");

$(".prev").click(function(){
    // do previous tab
    var $el = $(".active").prev(".itemWrap");
    if($el.length){
        $(".itemWrap").each(function() {
            $(this).removeClass("active");
        });
        $el.addClass("active");
    }

});

$(".next").click(function(){
    // do next tab
    var $el = $(".active").next(".itemWrap");
    if($el.length){
    $(".itemWrap").each(function() {
        $(this).removeClass("active");
    });
    $el.addClass("active");
    }
});

});

and here is your css

.itemWrap
{
display:none;
}
.itemWrap.active
{
display:block;
}

here is the fiddle

Upvotes: 1

wholevinski
wholevinski

Reputation: 3828

I think you should use the DOM state instead of js variables to determine what to hide or show next. That way you'll avoid global variables and be using the state of the DOM to determine behavior. Here's some quick code (it needs bounds checking and some improvements, but it should get you started):

$(document).ready(function(){
    $(".itemWrap").hide();
    $("#item1").show();
    $("#prev").click(function(){
        var currentVisible = $(".itemWrap:visible");
        currentVisible.hide();
        currentVisible.prev(".itemWrap").show();
    });

    $("#next").click(function(){
        var currentVisible = $(".itemWrap:visible");
        currentVisible.hide();
        currentVisible.next(".itemWrap").show();
    });
});

Here's a working fiddle if you'd like to try it: http://jsfiddle.net/jj5q441o/4/

Upvotes: 0

Related Questions