jQuery - Pagination of Visible Results?

Hello,

I'm trying to paginate only visible results, after they have been filtered (made hidden or visible) by other jQuery controls. The plugins I have tried seem to ignore the filtering controls, by not updating the pagination after a filter has been applied or removed. How would I go about this? Printing a count of visible/total for the user would be a nice touch.

An unpaginated sample is available here. Many thanks to mplungjan, as this is the result of our Filter Results by More Than 2 Intersections discussion.

Any help is much appreciated.
que-esAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Here is what I have so far. Not working at all but I really need to get away from the computer after 13 hours behind one

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/infusion/jQuery-Paging/master/jquery.paging.min.js"></script>
<script>
function onSelectCB() {}
function onFormatCB() {}


$(document).ready(function() {
    $('input:checkbox').attr('checked', 'checked');
    $(".chk").click(function() {
        $(".chk:checked").each(function() {
           $("."+this.id).show();
        });       
        $(".chk:not(:checked)").each(function() {
           $("."+this.id).hide();
           $("#content").empty();
           if ($(".courseBox:visible").length > 0) {
             $(".courseBox:visible").each(function() {
               var elem =$('<div>').attr("class","element").html($(this).html()); 
               $("#content").append(elem);      
             });
             $(".pagination").paging(1000, { // make 1000 elements navigatable
               format: '[< ncnnn! >]', // define how the navigation should look like
               perpage: 4, // show 4 elements per page
               lapping: 0, // don't overlap pages for the moment
               page: 1, // start at page, can also be "null" or negative
               onSelect: onSelectCB, // callback is called when user selects a page
               onFormat: onFormatCB // callback is called once for every "format" element
             });    
           }
        });        
    });        
});    
</script>
<style>
input {margin:0 0 10px 0;}
li {margin:5px 0px;}
</style>
<body>
<label><input class="chk" type="checkbox" checked="checked" id="course">Courses</label>
<label><input class="chk" type="checkbox" checked="checked" id="morning">Morning</label>
<label><input class="chk" type="checkbox" checked="checked" id="evening">Evening</label>
<div class="pagination toppagination"></div>
<div id="content">

</div>
<div class="pagination toppagination"></div>
	

<ul>
<li class="courseBox course">Course One</li>
<li class="courseBox course evening">Course One, Evening</li>
<li class="courseBox morning">Morning One</li>
<li class="courseBox course">Course Two</li>
<li class="courseBox course evening">Course Two, Evening</li>
<li class="courseBox morning">Morning Two</li>
<li class="courseBox course">Course Three</li>
<li class="courseBox course evening">Course Three, Evening</li>
<li class="courseBox morning">Morning Three</li>
<li class="courseBox course">Course Four</li>
<li class="courseBox course evening">Course Four, Evening</li>
<li class="courseBox morning">Morning Four</li>
<li class="courseBox course">Course Five</li>
<li class="courseBox course evening">Course Five, Evening</li>
<li class="courseBox morning">Morning Five</li>
<li class="courseBox course">Course Six</li>
<li class="courseBox course evening">Course Six, Evening</li>
<li class="courseBox morning">Morning Six</li>
</ul>

<span id="msg"></span>
</body>
</html>

Open in new window

que-esAuthor Commented:
I've taken several passes at altering the above code to achieve paginated display of visible elements, but so far no dice. Any further insight/input would be appreciated.
Michel PlungjanIT ExpertCommented:
Yeah, sorry I did not get it done. I'll push the "Request Attention" for you
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

que-esAuthor Commented:
It's OK, & thank you.
que-esAuthor Commented:
Hi,

The request for help was sent on 3/31, though nothing further has happened. Does anyone have a suggestion to resolve this question?

Thanks.
Michel PlungjanIT ExpertCommented:
I'll take one more look tomorrow
que-esAuthor Commented:
Thanks very much!
Michel PlungjanIT ExpertCommented:
Here is my work in progress

http://jsfiddle.net/mplungjan/a8TKw/

I would like you to email me - my email is in my profile

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
que-esAuthor Commented:
That is fantastic, thank you. I have been going through it to understand your process & how it works. Will integrate it into the larger solution tomorrow and report back. Sending you that email.
RobOwner (Aidellio)Commented:
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
que-esAuthor Commented:
The conversation started by the poster's solution was very informative, and I learned from it.
Michel PlungjanIT ExpertCommented:
Thanks - Me too. This is one reason I answer questions here for free :)
Here is the code from the jsFiddle

/* Filtering and pagination
   (c) 2012 Michel Plungjan - javascripts(a)plungjan.name */
var max = 5,cnt=0,sel,selLength; 
$(document).ready(function() {
    $('input:checkbox').attr('checked', 'checked');
    $(".chk").click(function() {
        $(".chk:checked").each(function() {
           $("."+this.id).show();
        });       
        $(".chk:not(:checked)").each(function() {
           $("."+this.id).hide();
        });
        init();
    });
    init();
}); 
function init() {
  cnt=0;
  sel = $("li:visible");
  selLength = sel.length;
  go(0);      
}
function nav() {
  var nav = $("#nav").empty();   
  if(selLength==0) {
    nav.append("Selection did not result in any courses");
    return;
  }        
  nav.append((cnt==0)?'<span class="disabled"><</span>':'<a href="#" onclick="return go(-1)"><b><</b></a>');
  var end = cnt+max;

  if (end > selLength) end = selLength;

  nav.append("&nbsp;"+(cnt+1)+"-"+end+" of "+selLength+"&nbsp;");
  nav.append((end>=selLength)?'<span class="disabled">></span>':'<a href="#" onclick="return go(1)"><b>></b></a>');
}
function go(dir) {
  if (dir<0) cnt-=max;  
  if (dir==1) cnt+=max;
  sel.hide();
  for (var i=cnt,n=0;i<selLength && n<max;i++,n++) {
    sel.eq(i).show();  
  }
  nav();
}    

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.