Rails Pagination with the Kaminari Gem

do you want to learn how to add pagination to your rail 6 application if so stick around to find out how i'm thomas with brain trust digital i'm a full stack developer obsessed with learning if you're interested in learning full stack web development please consider subscribing below i have a goal of reaching a thousand subscribers so it'd really mean the world to me if you consider subscribing or sharing with a friend who you think might also be interested in this type of content in this aws rails tutorial we're going to walk through how to add pagination to your rail 6 application with the kaminari gem i'm going to walk through how to install the gem how to generate the views and have them styled for bootstrap 4 and finally how to paginate for our users and our videos so with that out of the way let's get into this tutorial on how to add pagination to your real 6 application with kaminari as you can see we have the aws rails app loaded locally if you haven't seen this tutorial series yet i'll link to it in the card as well as the description this is just a rails application that i build up by example to use for this tutorial series so let's go ahead and jump to the application and we'll add kaminari to the gem file in the gem file we can go ahead and enter down once and add in the kaminari gem we can switch over to the terminal now and bundle install to get our new gem pulled in now that we've got kaminari installed we can go ahead and run the rails g kaminari colon config to generate a kaminari config file this is just a quick place where we can store all of our initial configuration and settings for caminari the last thing we'd want to do here in the terminal is generate our views this is going to allow us to apply the appropriate classes so that it's styled correctly for bootstrap 4. we type rails g caminari views while this didn't generate our views quite yet as we didn't pass in the required theme option i just wanted to run this command quickly so you can see all of the various options for themes that you can choose from they have default two three and four versions of bootstrap bourbon bulma and so on so you can pick whatever frontend framework you're using from this list or you could use the default and then override it to add the classes if you want to style for your own custom framework or a framework that's not on this list in our case we're using bootstrap 4 so we're going to copy this hit the up arrow to grab the command again hit a spacebar and then we're going to paste in bootstrap 4 and rerun this command as you can see this generated all the view files we need so let's go ahead in our application and check out everything that we've created first let's go ahead and check out that config file an app config initializers caminari config here you can see the various config options they're all commented out but they're all also displaying the kaminari defaults in our case let's go ahead and override the default per page value of 25 and instead let's just say we want to display 10 per page as this is an initializer we want to make sure this gets picked up so let's go ahead and restart our rails application just to make sure so the server running in a separate tab so i just switched over to restart that really quickly i'm going to switch over to my primary tab that i'm working in in item next we can go ahead and check out the views here you can see the generate views command create this caminari folder as well as all the files inside all these views were generated with bootstrap 4 styling in mind so it should look really clean once we present it on the front end now that that's out of the way let's go ahead and utilize kaminari to paginate our users and our videos so the first thing let's do is go over to our user model here in our user model we can add the paginates per 20. this is just an example of how we could have the default value of 10 for everything and then we could decide that on this user model specifically we want to paginate every 20 users to a page so go ahead and save that and then we're going to open up the users controller here in the users controller we just need to change this line populating the user's instance variable to say user dot page then we're gonna pass in the params page the last thing we need to do to display our pagination is flip over to the users index page and then we'll just add the call to output camera imagination so here in our users index page we're just going to drop down below our unordered list and add a call to paginate users we flip back over the front application and reload you get an error because we put param instead of params so let's go ahead and correct that now page reload and there you go you don't see any changes so what's happening well we don't have 20 users yet signed up for our website um feel free to sign up for aws rails.com for all of your aws and rails learning needs so let's go ahead back in the application and we're gonna lower this down a little bit let's just say paginates per two so we can actually see something happen here and there you go now you can see we only have two users unfortunately one of our users didn't put a first and last name so we might have to add a validation there in the future and then if you click on the second page you can see there's bear uh there's my account third page you can see chelsea and kevin r just kind of takes care of all this for us along with like the previous page first page last page so let's go ahead and paginate our videos as well i just want to interrupt for a quick second to see if you're finding value here and if you are i really appreciate it if you consider subscribing typically at this point my co-worker bear would perform tricks that are really impressive to try and entertain you and convince you to subscribe unfortunately we had an incident with an avocado and he's still recovering he got sentenced to 10 more days of cone life so we're just gonna let him go ahead and rest up you flip back over the application let's go ahead and open the video model in app models video here in the video model we're going to throw four videos per page so we'll just say paginates per four next we need to open the video controller to pass in that same page params as we did before this time without the typo so here under the index method we're going to say video dot page params plural and then pass in the page param the last thing we need to do here is flip over to the videos index view and add in the call to caminari's paginate so here just below our admin exclusive button to add new videos we're going to enter down a couple of times and then drop in the paginate call with our videos instance variable so we'll go ahead and save we'll flip back over to our application and visit the videos section as you can see just like before with the users we are now paginating our videos as well you can click through various page numbers and then you have these convenient links that show up when appropriate let me know in the comment section below if you have any ideas or questions i'm going to continue to build out the aws rails website so that it could slowly become a very useful resource for those trying to learn aws or rails or maybe both at the same time so any questions you have or confusion you have in your rails apps or your or integrations between aws and rails would be really beneficial to know so i guess the last thing we should do here is go ahead and commit and deploy our code flip back over to the terminal we're gonna go ahead and clear the screen then we'll run get status you can see all the changes we made as well as a few minor styling cleanups that i performed off camera so that this page looked a little bit nicer so the first i'm going to do is check out a branch check out dash b add pagination run get add dot to add all our files git commit dash m adds pagination caminari or run get push it's going to push our code up to github this is the point where if you're working with the team you would create a pull request and have your teammate review in an effort to save time we're just going to go ahead and merge our commit and deploy get checkout master get merge add pagination get push and then bundle exec cab production deploy now that our application's finished deploying let's go ahead and check it out on the front end loading up aws rails.com as you can see we can navigate to the videos and we now have pagination in place as always i hope this helped you out and if you have any questions or comments or ideas for for future tutorials you'd like to see please let me know in the comment section below please don't forget to like and subscribe that really helps out the channel and i can't tell you how much that means to me and with that i'll catch you in the next aws rails tutorial

Channel: BrainTrust Digital

Views: 1,895

Keywords: Rails Pagination with the Kaminari Gem, rails pagination gem, kaminari gem tutorial, kaminari bootstrap, rails pagination, rails 6 pagination bootstrap 4, ruby on rails pagination, ruby on rails, ruby on rails tutorial 2020, rails 6, ruby on rails 2021, ruby on rails tutorial, ruby on rails 6, ruby on rails web development, rails 6 tutorial, rails 6 bootstrap 4, bootstrap 4 pagination, bootstrap 4 pagination example, pagination using bootstrap 4, Web development 2021

Id: c0hrNQJhKww

Length: 9min 9sec (549 seconds)

Published: Sat Jul 18 2020