Datatables & Rails - Basic to Advanced - Ruby on Rails Tutorial

[Music] hey guys phil here zone master ruby on rails and today yes it's a ruby on rails talk as it seems to be the wanton recently on this channel and um what i'm going to be looking at today is incorporating data tables with rails and doing some what i consider to be advanced stuff but maybe you guys already know it and you're just going to go man it's easy so if you don't know what data tables is data tables is this jquery plug-in that gives you pretty awesome table features like sorting and just pagination and what i use it for and what most people use it for is the fact that you can do everything server-side so you can it has built-in hooks to call stuff out for ajax i'm not going to be doing that in this because that's not what this is about but call out to ajax pull in the data and all the rest of that stuff it is the thing if you want to show you know tabular data i think you should be using data tables so that being said what i'm going to do today is create a rails 5 app yes i'm doing this in rails 5. i'm not going to go through the exercise of doing this in rails 6. i use this in production rails 5 the stuff that i'm showing you today so yes create a rails 5 app install um all the goodies you know like bootstrap and jquery and all that stuff like that so we can get something that looks okay put in data tables show you the basics of data tables and then show you what i think is a cool slightly advanced feature and mostly we're talking about using select boxes down the side you know to select rows and do stuff on them so let's get into it my camera might be a bit close um so let's switch over how do we do that there we go i will try and keep myself on the right side of the picture so let's create a rails 5 app uh is that big enough yeah i i really don't want to make it any bigger than that so so rails and then you can do the version so you don't you know uh specify what version you want rails five to five in this case five to five is the latest 5.2 branch um or release and rails if i put new and we're going to call this data tables demo and i'm just going to use sql lite so i'm not going to do anything with database because they're not really showing anything here so it'll go off it'll um hopefully create a nice app let's go into it and uh let's open it up with vs code and see what we got here okay got our gem files rails five point five two five ruby six let's make that a little bigger for you guys there we go we should be able to see everything that find out so we have the app there and that should run let's we can yeah we don't need to create the database and everything right now because we're going to do some fun stuff first so um let's add in jquery and i i use the jquery rails app for that or a gem for that jquery bundles add jquery rails and it should go off it should go do its thing and put it in if we we can go and take a look if we want uh there's jquery rails there 4.4 and of course we still need to add in javascript um let's require j query just jquery i think and i think that's all we need to do for jquery so we're done done with jquery now let's add um jquery data tables data tables you're going to see a lot of my bad typing if you've been watching any others you know i'm not good my letters all um jquery data table it'll go through and should have added that in jquery data tables and jquery data tables so we are all set to go so this time i'm going to be doing an order app excuse me uh you know like ecommerce app that i'm familiar with like we do in zone master so we're going to be looking at a table of orders so let's create a scaffold of this g scaffold e con order and what do we want we want a price which is a float holy cow a item skew purchase date which will be a date time uh plot platform order number because you know each order each platform has their own way of doing order numbers sales channel because we sell across the world status um customer name customer state uh ship dot because you need to know when it got out of the warehouse um num items shipped which is an integer and the payment method you know we might want to show something about that so let's go off and create that there we go it creates all of our views and everything like that that we're not really going to use but to give a error of reality and let's now create the database db create and we're just using sql light here db migrate okay let's go into roots uh let's add a root gotta love the english language um so what was it e com orders index save that and now if we run let's create another tab for that if we run the server and if we go to localhost there we have our our view this is the standard rails index view as you know but let's get some data in there if you watch before you know that i love this gem faker so we're gonna use faker beautiful day here in japan today and what we'll do is generate a hundred orders and this is code i prepared earlier because that would be very painful to watch me type this so let's go through what we're doing here we have the let's check the columns you can do that by looking at the schema we have oh my gosh you guys didn't tell me i made a typing mistake all right let's uh drop the database do this right and did you know you can do this rails destroy scaffold and i'll remove everything and now let's create that with an item sku here we go create migrate okay now we look all right here's our columns price item sku purchase date so on and so on so we've got price item sku purchase date i think i called it something else tonight platform order number and sales channel yes status yes customer name is customer state yes shipped at yes num item shipped yes payment method is not an array this is the mistake i made in the last one and i'm not using those so we have uh do a quick format which didn't really work and what we've got order type i'm going to just choose randomly from these three as possible confirmed shipped or delivered purchase date faker time any time in the last 30 days ship that if it was shipped or delivered if the order type is included and shipped or delivered then set the ship dot to be three days after the purchase date um otherwise set it to be nil and then just create the object so we got a platform order number which i'm doing a three eight eight which is like amazon does price which is the uh anything between 10.20.99 the item sku uh purchase date that we set up here sales channel i'm not gonna do amazon de because later we'll see status is this order type up here customer name is the name customer state is a state which is an american state that's why i'm going to get rid of amazon d either ship that is shipped at number of items shipped let's do between one and two yeah whatever and a payment method of a credit card actually why that's what i wanted to do why don't we do mastercard or visa so this will go through it a hundred times and because there's a lot of random stuff in here it will create a random a bunch of random data so let's just let's just do that rails db seed now if we go and take a look there we are there's our data that looks ugly i think so but at least the data's in there um so why don't we go off and add some nice looking you know i like to have stuff that looks kind of nice so what we'll do is add bundle add bootstrap of course there's a million ways to add bootstrap but we're being all railsy today so let's do it like that rails and 4.1 so we want just bootstrap 4 i'm not going to get into bootstrap 5. um all right that will have added and now here's a little tip for you app css right is this but we need to be uh scss i think so um because we're going to do this we're going to import import bootstrap [Music] and okay and then we need to add into the application.js popper and bootstrap now the other thing i like to do is in the layout let's add a div so that we get some breathing space here div class equals container fluid that's my container of choice and now get something oh no unreadable that's because we have to restart the server sometimes you do sometimes you don't and [Music] this is bootstrap we inspect that bring over here you can see that uh is that using bootstrap yeah container container fluid yes there we go so let's go over to the index of ecom orders and first thing we're going to do of course is make this table a table make it striped and make it a little smaller because uh there's a lot of data in there so there we go does that bootstrap um actually do that tables i should have looked up this before tables small table what is it oh yeah table small okay all right so we've got our um bootstrap in we've got everything there and now you're saying phil where's the data tables and i'm like okay it's been how many minutes okay it's been 10 minutes already where's the bootstrap uh where's the data tables so let's add data tables again there's many ways you can do adding data tables because i'm so hooked on this bundle ad we're gonna bundle and what is it jquery data tables i believe jquery data tables oh i did it already yeah you know i had to do this video like three times so anyway jquery data tables is already in there so um but what we didn't do is the generator jquery data tables install and we're doing the bootstrap 4 version this will go off put some stuff in there and it will do it by it will do it wrong it will put data tables above jquery which will mean it won't work so that's the tip data tables has to be below jquery that's reason one of the reasons i'm redoing this video so we have data tables in there so let's if we look when we when we refresh this it's waiting there's still a lot of data tables because of course let's get rid of this stuff we're not going to create any new orders script um now how do you do that so we want to do document ready function and then we're gonna find well okay so we need uh the ordered table we need to give it an id so id of uh orders table we even can case it equals orders table dot data table now data tables has a million things that are confusing about it one is that there if you add the gem in there's an upper well i think even if you do the javascript there's an upper case like a data table with like this with that uppercase d can you see this yeah data table with an uppercase d or data table with lowercase d if you can believe it and they're different so uppercase d is the one you want now if we're lucky and we refresh this it won't work and that's because if we look at the inspector we're going to see huh can't read property m data let's refresh it oh can't read property m data and you're like well what's wrong and you know what it is this is because of this call span three um you know we don't have a heading here so the people at rails the good people at rails decided to give you one header that went over the top of those three that messes up data tables i'm actually going to remove the header and i'm going to remove those three columns anyway because it looks like crap and we don't need it now did you see that there we have data tables 20 minutes not even um so we have our pagination we have sorting we have searching so we look for amazon orders or ebay orders or orders that went to michigan oh my god nobody in michigan bought anything colorado there and we can change the page size and everything like that that's the basics of getting data tables installed let's move on and do a little bit uh you know kind of better than that so the first thing i would want to do of course is to sort this thing and it's a zero-based column so we want to sort it on purchase date so by default zero one two and sort it on to sending so now we refresh the page there we go you can see the little icon there so everything is automatically sorted by purchase date and now let's make it this is something that we are going to have you know the customers going to see this because they're going to be looking at their orders so let's make it look a little bit better um what i like to do is combine some stuff this is purely cosmetic but that's what i like to do half of our job is about the cosmetics you know it's like yeah so let's combine customer name and customer state into customer in or just customer get rid of that heading there we go so now we've got their name and their state and we can still search on that so utah colorado or uh mr janine smith zach i love the the names from faker uh so let's we've combined the customer let's do some stuff for the purchase as well so we're just going to say order or purchase and what we will do i'm gonna so i've got the purchase so the platform order number and then i'm gonna grab the sku no let's put a second line there there's many ways to do this of course strong skew strong put the skew there get rid of the skew column get rid of the skew column you know we can even do uh i don't didn't create an order but you could do a link to there i wonder if you can do that i've never tried to do this never should try things first time this won't work will it oh it does so we got the purchase and the skew because i've got this zoomed so big you know normally it would look something like that but that's a bit small on the yeah not that small but so we combined that um what else would i like to do well the order of the columns is is completely wrong normally you kind of want to know you think about it logically where they bought it when they bought it what they bought in status so sales channel purchase date we don't need the price so sales channel purchase date purchase info price status so move those around then of course our sorting is all wrong so we need to change that to the first column and you know we can do better than this with uh amazon and so on so let's add in um font awesome font awesome no font awesome cdn so let's just grab that off of the um we'll use one awesome five and we're just gonna grab the all the stuff for font awesome and we'll put that in our layout so now we have font awesome and we'll see what we're going to do so what sales channel instead of doing that let's go to the helper the ecom orders helper and we're gonna say def uh sales channel icon ecom order so we're going to case the ecom order dot sales channel and when it's amazon we'll do something when it's ebay we'll do something and there isn't a walmart icon um so we're going to just do an else so what we can do let's go to font awesome and what we want to look for is ebay and there is an ebay icon thank you so we'll just grab that so when it's ebay we'll return ebay and we're gonna this is gonna be our icon string and we'll return icon string html safe so amazon there's an amazon icon as well grab that and otherwise we'll just do question and let's do a square question mark is there a square question mark free version no pro pro pro okay question circle a lot to do otherwise we'll do the circle and then we can say sales channel icon there we go take a look at that again oh and that's because it's not amazon is it it's we can do that so when it contains amazon or ebay there we go we should get some amazon ebay and so on and shall we yeah and let's do the same thing for the confirmed so i'm going to create a def order status icon pass in the ecom order and our icon string equal case ecom order status so when it's confirmed do something when it's shipped we'll do something we have um when it's delivered we'll do something and then otherwise we'll do that question mark so the question mark's easy got that already and don't forget to return icon string html safe so when it's confirmed what are we going to use over here confirmed is all about they've paid so let's grab some money money bill wave and put that in there when it's shipped uh shipped i wonder if they have something nothing ship uh oh that's cute stripping fast let's grab that and when it's delivered um [Music] let's use that okay so add that in and that is the status so we can replace that don't worry i'll be done this stuff in a second and we've got a little thing a little bit boring the colors so let's make the bill wave of uh text um info text primary and text success now oh we got some nice colors so there we go um oh you know what drives me i'm sorry i'm a bit like this let me the other thing i want to do is change those times because i really don't like that so we're going to bundle add local time which is a nice jam from the boot camp people i think i need to do some javascript as well if i'm not mistaken ah just that js let's require local time with a dash in it let's restart and what we can do on these time columns is do this local time and local time if ecom order dot chip down because it may not be there and there we go so these are now in local time if we look at the local time gem [Music] uh it'll give us some nice you use some kind of formatting string uh where's the one with the time zone that's kind of cool let's see what that does ship that that didn't seem to do anything all right whatever so you get the time use a format string to get the you know uh time zone or whatever like this whereas this is the default one and then we can add a percent z or zed just so you can see here we go so i'm in japan so it's japan standard time so there you go uh [Applause] i'm just gonna do that i think it's nicer if you have a condition at the end to bracket it that's all the changes i'm going to do for the for the for the layout and things like that i think for now so we've got that all in there okay we're on to the next phase what have we done here we've created the app uh put in a bunch of libraries to make it look a little bit better put in data table put in data put in data tables gussied it up a little bit and now we've got this but i wanted to show you something a little bit more funky than that um let's get rid of we know what it is sales channel so um let's do something on these rows and we do that by adding a select box you've all seen that you know where you choose things like that this is a little bit tricky in in data tables and that's this is exactly why i'm making this video right now actually is because that so let's um first of all we're adding uh we're going to add gyrocode there's a built-in or a plug-in for for jquery that gives you select supposedly um but i find that it i i well i could never actually get it to work so we're going to use the gyrocode one which does work and you can do that simply by adding in a couple lines of javascript of course i'll put all the links and everything down to these libraries in here i'm going to put these at the bottom well i'll put the css at the top javascript at the bottom so i've got a css gyro code here data tables checkboxes css and then at the bottom i've got the data tables checkboxes thing so that's in and then what we need to do in the data tables initializer we need to add a column defs which is column definitions and we want to set the first targets to be the first column and we want to say check boxes and we want them to select the row when we do it that's all you need to do um we can change the select style actually to be style of multi that way we can choose more than one not just one so we've added this in column zero so we do need to add a blank um blank what's it cell there so we added the header and we added the cell there's a header there's a cell blank now any luck we'll get a checkbox booyah there we go check boxes ding ding select dolls does a thing that's nice how do you do anything with that select information you i hear you asking and uh the simplest way is to add a form and the best way to add forms and rails is to add another library and that's bundle add simple form gotta love simple form some not a simple form even and when that's done it's in there simple form 5.1 is in there let's restart this and let's add a form and we're going to put this form at the bottom simple form for do f end so what are we going to do so we need i just use the dummy order ecom order dot new um we're gonna set the url to be something we're gonna create how about we bulk actions ecom orders path we'll set the html id to be the bulk action form i think that's all we need to do we need to of course create this so let's go to our roots let's uh add a do block let's add a do block and what did i call it so it's a post we're doing a forum right so it's a bulk actions and this is going to be not on a specific one but on the whole collection and then in our controller um [Music] just below the update we're gonna bulk actions and i'm not going to do anything i'm going to just redirect to index i'm not going to be doing any updates or anything i'm just going to be showing you how to get there you can figure that part out for yourself all right so we refresh the page let's type the correct thing and let's add a submit f dot submit and we're going to call it submit so now we've got a i just want to give it some space here class some margin top border top there we go oh padding top there we go so um submit now let's take a look at what happens here so if we go over to our server i'm going to choose a couple of rows and i'm going to click submit we see that we did get a submit but there's nothing in there there's no how do we know what rows we've got right that's because what we need to do is at the time we submit the form we need to say okay we're using these rows so uh this is gonna be i'm not gonna type this in because that would be painful so let's paste that in so what i'm saying is on the bulk actions make sure i did set that to be no bulk actions so on the bulk actions form yes here on the submit so it's the form that's being uh doing the submitting so we just set form to be this now we're going to go out onto the table which is why we created this variable up here and on the first column which is check boxes get the ones that are selected and then for each of those rows that are selected we're going to bung a hidden input field in with an id and let's refresh the page let's choose some things let's clear our things we know and let's click submit and then we can see we've got id and all it is is a bunch of these whatever that is probably a hundred because we have a hundred rows and nothing so you're like phil what the hell and this is this is why i'm doing this video because man it's it's totally clear as mud that you have to do this what you need to do is when it puts those checkboxes in it takes whatever the contents are the checkbox and says that's a unique checkbox using these contents but we didn't put any content in that cell and so it thinks that they're all the same so the easiest thing to do is to put the id of the order so now refresh and let's choose a couple of these and submit and now you can see there's the id that we of the rows that we selected these rows are not sorted properly because i didn't change the sort so let's change the sort to be 0 1 2 again and then because everything's random if i choose a couple of these we'll see that we're kind of getting some random there we go some random ids because they're in random order so that's cool what we could do of course then in the bulk actions is we've got the ids we could simply look for the orders that are the ids and do something that's great if you have one form and one action but we don't want to do that do we so let's finally get to the next level data table stuff that i'm doing this video for make sure my camera is still working because this is the stuff here i saw this website where they had the select box here but when you selected something this was actually a drop down and you could choose what action it was you were going to do and i thought that is cool i want to do that how do you do it it took me two days to figure out and that's why again i'm going to give it to you in this video there'll be a you know if you're a cut and paster i'll be putting this project up on github and you can grab it yourself so what do we do first thing let's turn off the select all that they give us so now we refresh there's no select all button great what we're going to do up here is we're going to use bootstrap and a button group and a button group in bootstrap is let's see we can go over and look at the bootstrap website should i still have it no nope that was the wrong one to choose a bootstrap um example so we want to drop no a button group a button group lets you have multiple um things so you can nest them and you can do something like this where you have text over here and then a drop down i thought there was a better looking example but um maybe on this page anyway so you can have two sides and that's what we're going to do that's how we're going to do this so let's again i'm gonna copy and paste if you don't mind uh ah you know i'll try it i'll try it so we wanna create a div of class button group and then we're going to put two buttons a button of type button and a class of button and button light and button small because we don't have a lot of space and in and then we'll put the end button and inside of this we're going to put a span with an id of select all and then inside of this span we're going to put um from font awesome a square and just a regular square a regular square so we put that in there now if we take a look we do a quick refresh here see we've got the square and then we're going to add another button okay i'm going to copy and paste this one this is the button that does the drop down this is all standard bootstrap stuff so it's a button again button type button of class with a button button light button small but it's a drop down toggle and a drop down total split at the action and so on and so on so if we can take a look at that now we've got this drop down we don't have anything in the drop down so we create your regular uh drop down menu that you would do in bootstrap do that as the next div and and then you just put a bunch of links in there id of this one needs an id i'll show you why num selected text and so you just do these things you just do these uh links a drop down item you don't even need an href well you need an href but you don't need it to go anywhere and we can say zero orders selected so that'll be the first one let's just take a look and see now if i put there here zero order selected and i created a whole bunch of other things and i'll paste those in right now i'll show you what i did here create a divider and then like what are the things you're going to do when you haven't when you have an order you know maybe you want to refund that order maybe you want to send an email to that order you know and if people are really crazy in doing stuff you want to question the customer sanity or if you really don't like them you want to stock them online those are our actions that we would potentially take on an order and yes i'm joking okay so let's take a look at what we've got there we have this drop down got the dividers all standard bootstrap stuff sits at the top does absolutely nothing i hear you say all right well first thing we did we where is it in the header we created the check box with an id of select all so let's do something on that there's the select all when we click on it we're going to check and see how many rows are selected and if the rows selected are the same as the page length then select them or turn them off select false and otherwise turn it on so that should give us a select all behavior now the only problem is because i'm not doing ajax because i'm not paging properly there's actually 100 check boxes you can't see them i leave that as an exercise to you to do some uh paging proper paging pagination for this but yeah there you go it's turning them on and off and okay now when you click the submit so if you do this we haven't changed anything yet right we're still doing that so we don't want to click a submit anymore we want to do it from up here so let's get first of all let's get rid of the submit button and then what we'll do is from this these links when they are selected we will trigger the submit of the form and the way that we do that is by you know another click listener on this time we're not going to do it on an id we've used a class on all of these so on a button action link that was maybe too fast sorry on button action link that i added on all these uh a tags we will do something very similar there we go so on button action link on a click we will um log i'll show you the action in a second but we're going to get the rows selected and then for each row selected um well we're just going to bulk action form submit and then and then we know inside of the submit it gets the gets the stuff let's just comment this out for a second and i'll show you now that it is doing what we wanted to do let's clear our console let's pick three things choose that click refund and if we go over here we can see that it's done in bulk actions and it's got the ids of 22 and 4 which were the ids of the rows that we selected but we don't know what we're doing we only know that we've been sent and so we add a hidden field on the form form action type and then when we are selected see i've added a data element a data action refund email question stock we pull out that thing stuff it into the hidden field on the form and then we'll see it on the back end so here's the stuffing of the value into the form let's refresh one more time in the home stretch choose these bing bing bing go down here let's say send email and now we see our action type is email and our id are these and on the back end we can go through we can find those orders from those ids we know what our action is we can send or respond to that action for those emails did it oh my camera didn't die that would be a bummer no camera looks good so that's it um we created a rails 5 app we added in all the goodies like bootstraps and jqueries and data tables we put the data in we put that data into a data table we did the select all we did a submit form and then we did the next level stuff of the drop down with the actions there you go um this is what building about a professional app is all about you know finding these parts and these components and getting inspiration from other websites and doing that on your website and not stopping until you figure the thing out so i hope you like these kinds of videos um and if so of course like comment subscribe bell notification whatever it is just so you can get information about the next time i do a video i will be keeping on doing them and i'm for me okay i did this uh in an app an actual application i did this but to do this video really you know makes me distill down what i'm doing and when i'm doing it so it's very helpful to me so i'm grateful for the opportunity to give you some information drop me a line see you soon thanks

Channel: Phil Smy

Views: 2,495

Keywords: ruby on rails, learn ruby on rails, software as a service, saas business, how to create the perfect saas business, tech entrepreneurs, entrepreneur, become an entrepreneur, become an entrepreneur motivational video, be an entrepreneur, ruby on rails tutorial, rails tutorial, ruby programming language

Id: J3R-kyueb3I

Length: 54min 21sec (3261 seconds)

Published: Sun Apr 11 2021