next prev in jquery list to show only 5 and hide others

Question

I am trying to do this. I fetch the list of DATE's from the table and show them as list and want the prev and next to traverse these date's showing only the 5 at any time. Example, while the page loaded, i will display the recent 5 date's and when prev / next are clicked let it traverse the "lists"(pre-populated from the table) and show accordingly. This is like pagination but i dont really want to use a pagination plugin as my requirement is very simple. when each list/href is clicked, it loads up the content through ajax which is not shown here as that works fine for me.

I need help only to the make this "prev" and "next" traverse the list's(already pulled from table) and show only 5 hiding rest as it traverses. jsfiddle is attached here. please help. thanks.

jQuery:

  $( document ).ready(function() {

    $("a.next").click(function(){
        var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('.pagination li').first();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('.pagination li').last();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

}); // close jquery

HTML/PHP :

echo "

<div class='pagination pagination-lg'>

<ul class='pagination'>

";
$CID=getinfo(LOGIN);
$SQL = "SELECT DISTINCT date_format(SENTON,'%Y-%m-%d') as DATE from MESSAGES";

$result = mysql_query($SQL,$LINK);
$i=0;
echo "<li id='prev'><a href='#' class='prev'>Prev</a></li>";
while ( $rows = mysql_fetch_array($result,MYSQLI_ASSOC) ) {
  $i++;
 echo "<li><a href='#tab".$CID."day".$i."' id='#tab".$CID."day".$i."' data-toggle='tab' value='$i'>".$rows['DATE']."</a></li>";
 }

 echo "
 <li id='next'><a href='#' class='next'>Next</a></li></ul>

<div id='tab".$CID."day1' class='tab-pane'>
<h4>Day1  Content</h4>
  <p> and so on ...</p>
</div>
<div id='tab".$CID."day2' class='tab-pane'>
  <h4>Day2 Content</h4>
</div>
<div id='tab".$CID."day3' class='tab-pane'>
  <h4>Day3 Content</h4>
</div>

  <div id='tab".$CID."day4' class='tab-pane'>
  <h4>Day4 Content</h4>
</div>

    <div id='tab".$CID."day5' class='tab-pane'>
  <h4>Day5 Content</h4>
</div>

</div>
</div>
 ";

Jsfiddle here http://jsfiddle.net/Mg8fr/

Ibsen

in the fiddle there is only 5 items can you share a sample with 1-15 items – Vasquez

Try jsfiddle.net/arunpjohny/eZGJs/4 – Vasquez

also jsfiddle.net/arunpjohny/eZGJs/4 – Vasquez

@ArunPJohny please put your code as an answer. This question still shows that the answers are 0. – Rhombohedron

@Rhombohedron was just doing it – Vasquez

@ArunPJohny Yeah. We both committed together. – Rhombohedron

Answer 1

Try

$(document).ready(function () {
    var $pagination = $('.pagination');
    var $lis = $pagination.find('li:not(#prev, #next)');
    $lis.filter(':gt(4)').hide();
    $lis.filter(':lt(5)').addClass('active');

    var $next = $("#next").click(function () {
        var idx = $lis.index($lis.filter('.active:last')) || 0;

        var $toHighlight = $lis.slice(idx + 1, idx + 6);
        if ($toHighlight.length == 0) {
            $prev.show();
            return;
        }

        $next.show();        
        $lis.filter('.active').removeClass('active').hide();
        $toHighlight.show().addClass('active')
    });

    var $prev = $("#prev").click(function () {
        var idx = $lis.index($lis.filter('.active:first')) || 0;

        var start = idx < 4 ? 0 : idx - 4;
        var $toHighlight = $lis.slice(start, start + 5);
        if ($toHighlight.length == 0) {
            $prev.hide();
            return;
        }      

        $next.show();
        $lis.filter('.active').removeClass('active').hide();
        $toHighlight.show().addClass('active')
    });

}); // close jquery

Demo: Fiddle

Vasquez

thanks guys. I was able to successfully integrate this to my requirement and it works great. looks like i need some more changes to it which i have been trying to do in the fiddle here. (1). I want the "next" or "prev" to disappear when it reaches the top-most or the bottom-most list while traversing (2). i want only the toppest lists to be first shown when the page loads up (i made that change already but when i click the next or prev it messes up with the remaining list showing up). can u help? – Ibsen

I think i made those changes already in the fiddle while posting the question here. i will check back my changes to confirm they work fine. in the meanwhile i think i have the new requirement. how do i make the li:last one item clicked by-default so that it shows the contents when the page loads up ? in other words how to fire a click event on the li ? thanks. – Ibsen

Hello Arun, I tried applying your code, but it gives error (Uncaught SyntaxError: Unexpected token) – Benthos

It is a synatax error, did you copy the code from the fiddle... that is working – Vasquez

Answer 2

You may want this

$( document ).ready(function() {
    $('ul.pagination li').eq(5).nextAll().not('#next').hide().andSelf().siblings().eq(1).addClass('active');
    $("a.next").click(function(){
    var $toHighlight = $('.active').next().not('a#next').length > 0 ? $('.active').next() : $('.pagination li').eq(1);
    if($toHighlight.attr('id') == 'next') {
        $('.active').removeClass('active');
        $('ul.pagination li').not('#next').not('#prev').hide()
        .eq(0).addClass('active').nextAll("*:lt(4)").andSelf().show();
    }
    else if(!$toHighlight.is(':visible')){
        $('.active').hide().removeClass('active');
        $toHighlight.nextAll("*:lt(5)").andSelf().show();
        $toHighlight.addClass('active').prevAll().not('#prev').hide();
    }
    else {
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
        }
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().not('#prev').length > 0 ? $('.active').prev() : $('.pagination li').eq($('ul.pagination li').length-2);
        if($toHighlight.attr('id') == 'prev') {
            $('.active').removeClass('active');
            $('ul.pagination li').not('#next').not('#prev').hide();
            $('ul.pagination li#next').addClass('active');
            $('.active').prevAll("*:lt(4)").andSelf().show();
        }
        else if(!$toHighlight.is(':visible')){
            $('.active').removeClass('active');
             $('ul.pagination li').not('#next').not('#prev').hide();
             $toHighlight.addClass('active').prevAll("*:lt(4)").andSelf().show();
        }
        else {
            $('.active').removeClass('active');
            $toHighlight.addClass('active');
        }
    });

}); // close jquery

DEMO.

Ruthenic

fantastic, it works great in the demo. let me take this to my main script to integrate and see how that helps. thanks for the help. – Ibsen