Permalink
Browse files

Merge pull request #2 from davemorro/master

Pull request
  • Loading branch information...
2 parents a7e8e85 + cb09e2a commit 68f99a94d525cbe4757dbb35522c53eca731f70d @davidwparker committed Jul 29, 2011
Showing with 109 additions and 73 deletions.
  1. +42 −32 README
  2. +20 −9 README.markdown
  3. +47 −32 jquery.bottomlesspagination.js
View
74 README
@@ -1,56 +1,66 @@
+This fork of jquery-bottomless-pagination makes a number of changes from the original:
+
+1. ajaxLoaderPath is optional. If not specified, a text 'Loading...' message is shown
+2. The total page count is retrieved from the last numbered pagination link and is used to disable the 'More' link when the end of the set is reached (Previously the link was disabled when the ajax call returned no data, requiring an extra click to confirm the end of the set).
+3. When the end of the set is reached, the 'More' link turns into a 'Back to top' link.
+4. A span is added to the 'More' link with class 'icon'. Can be used to include an image, such as an arrow, in the pagination via CSS.
+5. Updated to work with will_paginate implementation that does not wrap the current page number in a span with class 'current'. Uses the 'next page' node instead.
+
jquery-bottomless-pagination is a facebook-like jQuery plugin built on top of the Rails will_paginate plugin where results are returned and appended to the end of a list.
Usage:
You should already be using the will_paginate plugin.
Then, be sure to include the plugin (example in haml):
- = javascript_include_tag 'jquery.bottomlesspagination.js'
+ = javascript_include_tag 'jquery.bottomlesspagination.js'
Here are the optional settings (displayed below are the defaults):
- ajaxLoaderPath:'../images/ajax-loader.gif',
- results:'.results',
- objName:'',
- callback:null
+* ajaxLoaderPath:'../images/ajax-loader.gif',
+* results:'.results',
+* objName:'',
+* callback:null
+
+ajaxLoaderPath: the path to your image which will be displayed while the ajax call is being made. If no path is specified ('' or null), 'Loading...' is displayed while the ajax call is being made.
+
+results: the CSS selector that jQuery will use to append the results of the ajax call to.
+
+objName: the name of the object that you would like displayed in the phrase "More [objName]". If not set, the pagination displays "More".
-ajaxLoaderPath is the path to your image which will be displayed while the ajax call is being made.
-results is the CSS selector that jQuery will use to append the results of the ajax call to.
-objName is the name of the object that you would like displayed in the phrase "Show more (objName)..." and "There are no more (objName) to add..."
-finally, callback is a function which you can provide to perform extra functions after the objects are appended, such as adding highlight or zebra effects.
+Callback: a function which you can provide to perform extra functions after the objects are appended, such as adding highlight or zebra effects.
All of these settings can be provided similarly to the following:
- $.bottomlessPagination({objName:'rows', callback:function(){
- //highlight current row
- $(".results li").hover(function() {
- $(this).addClass("hover");
- }, function() {
- $(this).removeClass("hover");
- });
- }});
+ $.bottomlessPagination({objName:'rows', callback:function(){
+ //highlight current row
+ $(".results li").hover(function() {
+ $(this).addClass("hover");
+ }, function() {
+ $(this).removeClass("hover");
+ });
+ }});
You may need to provide something like the following for Rails.
- $.ajaxSetup({
- 'beforeSend': function(xhr) {
- xhr.setRequestHeader("Accept","text/javascript")}
- });
+ $.ajaxSetup({
+ 'beforeSend': function(xhr) {
+ xhr.setRequestHeader("Accept","text/javascript")}
+ });
On the rails side of things, in your controller, just return the partial which iterates through your returned objects:
- def index
- @objects = Object.paginate :page => params[:page]
- respond_to do |format|
- format.html
- #ajax response
- format.js { render :template => 'objects/_index_objects.html.haml'}
+ def index
+ @objects = Object.paginate :page => params[:page]
+ respond_to do |format|
+ format.html #index.html.haml
+ format.js { render :template => 'objects/_index_objects.html.haml'} # ajax response
+ end
end
- end
and the partial:
- - for object in @object
- %li.result_row
- Your stuff here
+ - for object in @object
+ %li.result_row
+ Your stuff here
-That's it. Be sure to check out the plugin in its entirety on Github. Feedback is always welcome. Enjoy!
+That's it. Be sure to check out the plugin in its entirety on Github. Feedback is always welcome. Enjoy!
View
@@ -1,3 +1,11 @@
+This fork of jquery-bottomless-pagination makes a number of changes from the original:
+
+1. ajaxLoaderPath is optional. If not specified, a text 'Loading...' message is shown
+2. The total page count is retrieved from the last numbered pagination link and is used to disable the 'More' link when the end of the set is reached (Previously the link was disabled when the ajax call returned no data, requiring an extra click to confirm the end of the set).
+3. When the end of the set is reached, the 'More' link turns into a 'Back to top' link.
+4. A span is added to the 'More' link with class 'icon'. Can be used to include an image, such as an arrow, in the pagination via CSS.
+5. Updated to work with will_paginate implementation that does not wrap the current page number in a span with class 'current'. Uses the 'next page' node instead.
+
jquery-bottomless-pagination is a facebook-like jQuery plugin built on top of the Rails will_paginate plugin where results are returned and appended to the end of a list.
Usage:
@@ -13,10 +21,13 @@ Here are the optional settings (displayed below are the defaults):
* objName:'',
* callback:null
-ajaxLoaderPath is the path to your image which will be displayed while the ajax call is being made.
-results is the CSS selector that jQuery will use to append the results of the ajax call to.
-objName is the name of the object that you would like displayed in the phrase "Show more (objName)..." and "There are no more (objName) to add..."
-finally, callback is a function which you can provide to perform extra functions after the objects are appended, such as adding highlight or zebra effects.
+ajaxLoaderPath: the path to your image which will be displayed while the ajax call is being made. If no path is specified ('' or null), 'Loading...' is displayed while the ajax call is being made.
+
+results: the CSS selector that jQuery will use to append the results of the ajax call to.
+
+objName: the name of the object that you would like displayed in the phrase "More [objName]". If not set, the pagination displays "More".
+
+Callback: a function which you can provide to perform extra functions after the objects are appended, such as adding highlight or zebra effects.
All of these settings can be provided similarly to the following:
@@ -34,15 +45,15 @@ You may need to provide something like the following for Rails.
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.setRequestHeader("Accept","text/javascript")}
- });
+ });
-In your Rails controller, just return the partial which iterates through your returned objects:
+On the rails side of things, in your controller, just return the partial which iterates through your returned objects:
def index
@objects = Object.paginate :page => params[:page]
respond_to do |format|
- #ajax response
- format.js { render :template => 'objects/_index_objects.html.haml'}
+ format.html #index.html.haml
+ format.js { render :template => 'objects/_index_objects.html.haml'} # ajax response
end
end
@@ -52,4 +63,4 @@ and the partial:
%li.result_row
Your stuff here
-Feedback is always welcome. Enjoy!
+That's it. Be sure to check out the plugin in its entirety on Github. Feedback is always welcome. Enjoy!
@@ -8,57 +8,72 @@
objName:'',
callback:null
},callerSettings||{});
+
settings.imgLoader = new Image();
settings.imgLoader.src = settings.ajaxLoaderPath;
- settings.href = $(".current").next().attr("href");
+ settings.href = $(".next_page").attr("href");
+
+ // Get the total number of pages from the last numbered pagination link
+ last_pagination_link = $(".pagination a").not(".next_page, .previous_page").last();
+ settings.total_pages = getPageNumber(last_pagination_link.attr('href'));
+ // If pagination exists, hide existing and append the bottomless pagination html
if ($('div.pagination').size() > 0){
$('div.pagination').wrap("<div class='pagination_links'></div>").hide();
+
$('.pagination_links').append(
- "<div class='live_pagination'>" +
- "<a class='more_links' style='cursor:pointer;'>Show more " + settings.objName + "...</a>" +
- "</div>"
+ "<div class='clearfix live_pagination'><div>" +
+ "<a class='more_links'>More " + settings.objName + "<span class='icon'></span></a>" +
+ "</div></div>"
);
+
+ // Setup the loader. If no image provided use a text message. Loader is initially hidden.
+ if ((settings.ajaxLoaderPath == '') || (settings.ajaxLoaderPath == null)) {
+ $(".more_links").after("<div class='now_loading'>Loading...</div>");
+ } else {
+ $(".more_links").after("<div class='now_loading'><img src='"+settings.imgLoader.src+"' /></div>");
+ }
+
+ $(".now_loading").hide();
}
- $(".more_links").click(function(){
+
+ $(".more_links").click(function(e){
+ e.preventDefault();
$(".more_links").hide();
- if ($(".now_loading").size() == 0)
- $(".more_links").after("<img class='now_loading' src='"+settings.imgLoader.src+"' />");
- else
- $(".now_loading").show();
- $.get(
- settings.href,'',function(data){
+ $(".now_loading").show();
+
+ // Get the data & update links
+ $.get(settings.href,function(data){
$(settings.results).addrows(data);
+ $(".now_loading").hide();
+ $(".more_links").show();
}
);
- $(".now_loading").hide();
- $(".more_links").show();
return false;
});
$.fn.addrows = function(data) {
- //remove live pagination if there are no more jobs
- if (data.length === 0 ){
+ curr_page = getPageNumber(settings.href);
+ $(settings.results).append(data);
+
+ // Replace live pagination if there are no more results, else update the href for the next page
+ if (curr_page == settings.total_pages) {
$('.live_pagination').remove();
- $('.pagination_links').append(
- "<div class='no_pagination'>" +
- "There are no more " + settings.objName + " to add..." +
- "</div>"
- );
+ $('.pagination_links').append('<div class="live_pagination back_to_top"><a href="#" class="top">Back to top &uarr;</a></div>');
return false;
+ } else {
+ next_page = curr_page + 1;
+ settings.href = settings.href.replace('page=' + curr_page, 'page=' + next_page.toString());
}
-
- var pageRE = /page=(\d+)/,
- pageMatch = settings.href.match(pageRE);
-
- if (pageMatch) {
- var pageNumber = parseInt(pageMatch[1]) + 1;
- settings.href = settings.href.replace(pageRE, 'page=' + pageNumber);
- }
-
- //add results to the page
- $(settings.results).append(data);
+
if (settings.callback) settings.callback();
};
+
+ function getPageNumber(url) {
+ pageRE = /page=(\d+)/;
+ pageMatch = url.match(pageRE);
+ return parseInt(pageMatch[1]);
+ };
+
};
-})(jQuery);
+})(jQuery);

0 comments on commit 68f99a9

Please sign in to comment.