SlideShare uma empresa Scribd logo
1 de 2
AJAX Pagination using jQuery in Rails3
Ajax pagination will do the same functionality of pagination without refreshing the page. It call the
action through jQuery to display the results per page. This example demonstrates the
implementation of ajax pagination in Rails3. However the same can be used with Rails2.3.x.
Remember to add jQuery to your paths.

Step#1

Add following gem to your Gemfile

gem 'will_paginate'

Run bundle install

Step#2

Include the following code in the controller you want to paginate, For example, I have used Posts
controller.


class PostsController < ApplicationController
  def index
   @posts = Post.paginate(page: params[:page], per_page: 10)
  end
end




Step#3

Add this in the view “posts/index.html.erb” file



<div id="post_id">
    <%= render partial: 'posts' %>
 </div>



Encapsulate the order list in the partial view "posts/_posts.html.erb"


<ul>
 <% @posts.each do |post| %>
  <li>
     <!-- Show post data -->
  </li>
 <% end %>
</ul>
<%= will_paginate(@posts ,:id=>"ajax_paginate") %>

<script>

$(document).ready(function() {
   $("#ajax_paginate").find("a").each(function(){
var linkElement = $(this);
        var paginationURL = linkElement.attr("href");
        linkElement.attr({"url": paginationURL,"href": "#"});
        linkElement.click(function(){
           $("#post_id").html('<div align="center"><br/><img src="/images/loader.gif" /></div>')
           $("#post_id").load($(this).attr('url'));
           return false;
           });
       });
 });

</script>



The last line "<%= will_paginate(@posts ,:id=>"ajax_paginate") %>" will generate your
pagination links

Voila, You are done!

Mais conteúdo relacionado

Mais procurados

Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubhamAngular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
Shubham Verma
 
SocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubhamSocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubham
Shubham Verma
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
Brajesh Yadav
 

Mais procurados (20)

Well
WellWell
Well
 
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubhamAngular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
 
Using schemas in parsing xml part 2
Using schemas in parsing xml part 2Using schemas in parsing xml part 2
Using schemas in parsing xml part 2
 
SocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubhamSocketIOSetupWithAngularJSAppByShubham
SocketIOSetupWithAngularJSAppByShubham
 
Git setuplinux
Git setuplinuxGit setuplinux
Git setuplinux
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp AtlantaIntro to Rails Give Camp Atlanta
Intro to Rails Give Camp Atlanta
 
Catalog display
Catalog displayCatalog display
Catalog display
 
jQuery Intro
jQuery IntrojQuery Intro
jQuery Intro
 
深入淺出RoR
深入淺出RoR深入淺出RoR
深入淺出RoR
 
Dash of ajax
Dash of ajaxDash of ajax
Dash of ajax
 
Rails 2.3 and Rack - NHRuby Feb 2009
Rails 2.3 and Rack - NHRuby Feb 2009Rails 2.3 and Rack - NHRuby Feb 2009
Rails 2.3 and Rack - NHRuby Feb 2009
 
Htaccess
HtaccessHtaccess
Htaccess
 
Ruby on rails3 - introduction to rails
Ruby on rails3 - introduction to railsRuby on rails3 - introduction to rails
Ruby on rails3 - introduction to rails
 
Asp.net page lifecycle
Asp.net page lifecycleAsp.net page lifecycle
Asp.net page lifecycle
 
Laravel 8 events and listeners with example
Laravel 8 events and listeners with exampleLaravel 8 events and listeners with example
Laravel 8 events and listeners with example
 
Htaccess
HtaccessHtaccess
Htaccess
 
Rack
RackRack
Rack
 
Web project details
Web project detailsWeb project details
Web project details
 
Creating EPiServer Usage Reports
Creating EPiServer Usage ReportsCreating EPiServer Usage Reports
Creating EPiServer Usage Reports
 

Destaque (7)

YHE Certificate
YHE CertificateYHE Certificate
YHE Certificate
 
Founding Fathers Sellsheet_Coffee
Founding Fathers Sellsheet_CoffeeFounding Fathers Sellsheet_Coffee
Founding Fathers Sellsheet_Coffee
 
Feliz natal
Feliz natalFeliz natal
Feliz natal
 
Proposicion empleo colaboracion social
Proposicion empleo colaboracion socialProposicion empleo colaboracion social
Proposicion empleo colaboracion social
 
measurement tadika Assignment no.2
measurement tadika Assignment no.2 measurement tadika Assignment no.2
measurement tadika Assignment no.2
 
Die Präsentation #3.6 - «Bohrvorrichtung Bogomolov»
Die Präsentation #3.6 - «Bohrvorrichtung Bogomolov»Die Präsentation #3.6 - «Bohrvorrichtung Bogomolov»
Die Präsentation #3.6 - «Bohrvorrichtung Bogomolov»
 
Gabarito IFPE
Gabarito IFPEGabarito IFPE
Gabarito IFPE
 

Semelhante a Ajax pagination using j query in rails3

ASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CSASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CS
tutorialsruby
 
ASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CSASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CS
tutorialsruby
 
Implement Search Screen Using Knockoutjs
Implement Search Screen Using KnockoutjsImplement Search Screen Using Knockoutjs
Implement Search Screen Using Knockoutjs
Neeraj Kaushik
 
Анатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to zАнатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to z
LEDC 2016
 

Semelhante a Ajax pagination using j query in rails3 (20)

Building a dashboard using AngularJS
Building a dashboard using AngularJSBuilding a dashboard using AngularJS
Building a dashboard using AngularJS
 
MVC Training Part 1
MVC Training Part 1MVC Training Part 1
MVC Training Part 1
 
ASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CSASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CS
 
ASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CSASPNET_MVC_Tutorial_06_CS
ASPNET_MVC_Tutorial_06_CS
 
Implement Search Screen Using Knockoutjs
Implement Search Screen Using KnockoutjsImplement Search Screen Using Knockoutjs
Implement Search Screen Using Knockoutjs
 
Build your website with angularjs and web apis
Build your website with angularjs and web apisBuild your website with angularjs and web apis
Build your website with angularjs and web apis
 
Templates, partials and layouts
Templates, partials and layoutsTemplates, partials and layouts
Templates, partials and layouts
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
How to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
 
Demystifying Drupal AJAX Callback Commands
Demystifying Drupal AJAX Callback CommandsDemystifying Drupal AJAX Callback Commands
Demystifying Drupal AJAX Callback Commands
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
 
JSP Error handling
JSP Error handlingJSP Error handling
JSP Error handling
 
Simple mvc4 prepared by gigin krishnan
Simple mvc4 prepared by gigin krishnanSimple mvc4 prepared by gigin krishnan
Simple mvc4 prepared by gigin krishnan
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
 
NYCCAMP 2015 Demystifying Drupal AJAX Callback Commands
NYCCAMP 2015 Demystifying Drupal AJAX Callback CommandsNYCCAMP 2015 Demystifying Drupal AJAX Callback Commands
NYCCAMP 2015 Demystifying Drupal AJAX Callback Commands
 
Aspnet mvc tutorial_01_cs
Aspnet mvc tutorial_01_csAspnet mvc tutorial_01_cs
Aspnet mvc tutorial_01_cs
 
An Introduction to Ruby on Rails
An Introduction to Ruby on RailsAn Introduction to Ruby on Rails
An Introduction to Ruby on Rails
 
Jsf intro
Jsf introJsf intro
Jsf intro
 
Анатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to zАнатолий Поляков - Drupal.ajax framework from a to z
Анатолий Поляков - Drupal.ajax framework from a to z
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 

Mais de Andolasoft Inc

Mais de Andolasoft Inc (20)

Latest Facts and Trends in Fitness App Development
Latest Facts and Trends in Fitness App DevelopmentLatest Facts and Trends in Fitness App Development
Latest Facts and Trends in Fitness App Development
 
Challenges of React Native App Development_ Effective Mitigation Strategies.pdf
Challenges of React Native App Development_ Effective Mitigation Strategies.pdfChallenges of React Native App Development_ Effective Mitigation Strategies.pdf
Challenges of React Native App Development_ Effective Mitigation Strategies.pdf
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
Essential Functionalities Your Real Estate Web App Must Have.pdf
Essential Functionalities Your Real Estate Web App Must Have.pdfEssential Functionalities Your Real Estate Web App Must Have.pdf
Essential Functionalities Your Real Estate Web App Must Have.pdf
 
A Complete Guide to Developing Healthcare App
A Complete Guide to Developing Healthcare AppA Complete Guide to Developing Healthcare App
A Complete Guide to Developing Healthcare App
 
Game-Changing Power of React Native for Businesses in 2024
Game-Changing Power of React Native for Businesses in 2024Game-Changing Power of React Native for Businesses in 2024
Game-Changing Power of React Native for Businesses in 2024
 
A Complete Guide to Real Estate Website Development
A Complete Guide to Real Estate Website DevelopmentA Complete Guide to Real Estate Website Development
A Complete Guide to Real Estate Website Development
 
How to Build Cross-Platform Mobile Apps Using Python
How to Build Cross-Platform Mobile Apps Using PythonHow to Build Cross-Platform Mobile Apps Using Python
How to Build Cross-Platform Mobile Apps Using Python
 
Impact of AI on Modern Mobile App Development
Impact of AI on Modern Mobile App DevelopmentImpact of AI on Modern Mobile App Development
Impact of AI on Modern Mobile App Development
 
How to Optimize the SEO of Shopify Stores
 How to Optimize the SEO of Shopify Stores How to Optimize the SEO of Shopify Stores
How to Optimize the SEO of Shopify Stores
 
14 Tips On How To Improve Android App Performance
14 Tips On How To Improve Android App Performance14 Tips On How To Improve Android App Performance
14 Tips On How To Improve Android App Performance
 
The Ultimate Guide to Setting Up Your WooCommerce Store
The Ultimate Guide to Setting Up Your WooCommerce StoreThe Ultimate Guide to Setting Up Your WooCommerce Store
The Ultimate Guide to Setting Up Your WooCommerce Store
 
Ranking The Best PHP Development Companies in the World
Ranking The Best PHP Development Companies in the WorldRanking The Best PHP Development Companies in the World
Ranking The Best PHP Development Companies in the World
 
Top 8 WordPress Design and Development Trends of 2023
Top 8 WordPress Design and Development Trends of 2023Top 8 WordPress Design and Development Trends of 2023
Top 8 WordPress Design and Development Trends of 2023
 
List of 10 Best WordPress Development Companies
List of 10 Best WordPress Development CompaniesList of 10 Best WordPress Development Companies
List of 10 Best WordPress Development Companies
 
WooCommerce vs Shopify: Which is Better For Your Online Store
WooCommerce vs Shopify: Which is Better For Your Online StoreWooCommerce vs Shopify: Which is Better For Your Online Store
WooCommerce vs Shopify: Which is Better For Your Online Store
 
Why Choose WooCommerce For Your eCommerce Store
Why Choose WooCommerce For Your eCommerce StoreWhy Choose WooCommerce For Your eCommerce Store
Why Choose WooCommerce For Your eCommerce Store
 
Django Workflow and Architecture
Django Workflow and ArchitectureDjango Workflow and Architecture
Django Workflow and Architecture
 
Service Oriented Architecture in NodeJS
Service Oriented Architecture in NodeJSService Oriented Architecture in NodeJS
Service Oriented Architecture in NodeJS
 
Top Features And Updates Of Angular 13 You Must Know
Top Features And Updates Of Angular 13 You Must KnowTop Features And Updates Of Angular 13 You Must Know
Top Features And Updates Of Angular 13 You Must Know
 

Último

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Último (20)

Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 

Ajax pagination using j query in rails3

  • 1. AJAX Pagination using jQuery in Rails3 Ajax pagination will do the same functionality of pagination without refreshing the page. It call the action through jQuery to display the results per page. This example demonstrates the implementation of ajax pagination in Rails3. However the same can be used with Rails2.3.x. Remember to add jQuery to your paths. Step#1 Add following gem to your Gemfile gem 'will_paginate' Run bundle install Step#2 Include the following code in the controller you want to paginate, For example, I have used Posts controller. class PostsController < ApplicationController def index @posts = Post.paginate(page: params[:page], per_page: 10) end end Step#3 Add this in the view “posts/index.html.erb” file <div id="post_id"> <%= render partial: 'posts' %> </div> Encapsulate the order list in the partial view "posts/_posts.html.erb" <ul> <% @posts.each do |post| %> <li> <!-- Show post data --> </li> <% end %> </ul> <%= will_paginate(@posts ,:id=>"ajax_paginate") %> <script> $(document).ready(function() { $("#ajax_paginate").find("a").each(function(){
  • 2. var linkElement = $(this); var paginationURL = linkElement.attr("href"); linkElement.attr({"url": paginationURL,"href": "#"}); linkElement.click(function(){ $("#post_id").html('<div align="center"><br/><img src="/images/loader.gif" /></div>') $("#post_id").load($(this).attr('url')); return false; }); }); }); </script> The last line "<%= will_paginate(@posts ,:id=>"ajax_paginate") %>" will generate your pagination links Voila, You are done!