Solved

jQuery - Pagination of Visible Results?

Posted on 2012-03-14
14
273 Views
Last Modified: 2013-11-18
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.
0
Comment
Question by:que-es
  • 6
  • 5
14 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37721650
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

0
 

Author Comment

by:que-es
ID: 37788698
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37789301
Yeah, sorry I did not get it done. I'll push the "Request Attention" for you
0
 

Author Comment

by:que-es
ID: 37789338
It's OK, & thank you.
0
 

Author Comment

by:que-es
ID: 37921697
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37921764
I'll take one more look tomorrow
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:que-es
ID: 37921919
Thanks very much!
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37922907
Here is my work in progress

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

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

Author Comment

by:que-es
ID: 37950082
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.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39656817
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".
0
 

Author Closing Comment

by:que-es
ID: 39656819
The conversation started by the poster's solution was very informative, and I learned from it.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39657190
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

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now