Datatables in Laravel: Default and AJAX (Demo Project)

hello guys this is again polish color from laravel daily team and a lot of a business YouTube channel weekly tradition of demo projects continues and today I want to switch a little and make a little different thing so we will not create a demo project but instead I will show you example of mini project for data tables data tables net is JavaScript library this here basically to view the tables and to do all the search page nation and order with JavaScript so basically you have a lot of data and instead of doing pagination or sailfin laravel you just load the JavaScript library which takes care of everything and in this video I will for those who watched my previous videos I will do a little different thing I was always live coding with phpstorm and took quite a lot of time it took half an hour to make a mini project instead I've created the project outside of this video and I will show you the code so I will save you time and I will avoid some glitches and some bugs on live coding which also takes your time to watch and to wait until I fix something so the project is already created it's actually on github already but I will show you step by step how to how to use data tables in laravel basically so let's begin the project is a really simple one with one table with database table customers first name last name and email and ID timestamps then I've created a seed cedar for creating 50 random customers every customer is described with customer factory like this so with library fakir we take first name last name and email unique email and just load it all into the table which actually looks like this that's the database so that's the actual table we have after the seeding there are 50 rows here and and yeah that's the database layer on the front and side we have a simple laravel project the design comes from make off from laravel I just basically copied copied and pasted it into a simple view and here we have three menu items simple table so just laravel table just blade table without any any data tables then with data tables and then with Ajax or in other words it's called server-side rendering and I will explain the difference so in basic example we have let's open up routes so in this example have well the same controller from controller and this is what we have in basic example we we load all customers and we view the table so in table blade we have simply this one we extend the same app layouts which comes actually with default laravel off and we just load the table with for each loop nothing fancy here just just showing the entries then this is how it looks you load the table there are 50 entries no pagination no search nor anything just simple table 50 entries now data tables how does it work and how does it look let's click data tables and this is the example so the same actually the same controller thing almost the same almost identical actually we load all customers we load a different view different blade file with the same customers and how it looks in view so there's a little more JavaScript here so basically the same table that part didn't change at all but we add style from data tables in styles and by the way that app I will show you the app layout so you would understand app layout has thing called yield styles on the top and you know Java scripts at the bottom and also have has jQuery loaded pre-loaded so in every blade view we can add section styles and section Java scripts so installs we have data table Styles which comes actually from default installation basically if you go to dated tables nine you know I think it is installation installation so that's the those two lines that we need here no actually the CM we were using city and Persians so we have CSS and we have one line of JavaScript so that's exactly what we're doing here here we add CSS and we add JavaScript and then the data tables is initialized actually by this line so hash data table corresponds to ID data table here and it just loads data table method to all the table which visually transforms the basic table which was shown before to this one with pagination with search within search for like say for example it goes it works with JavaScript we can have pagination so all data is preloaded the whole table is preloaded actually and when we're clicking here it just reloads internally without reloading the page which is perfect but there is another way of floating the JavaScript log loading the table actually not preload the whole table the whole customers would preload only the part of it with API and it's called Ajax or server-side index tables it looks like this basically I'm not sure if you see that the processing part so if I click here see processing for for fraction of a second and only then that is shown and the main bit here is when we click for example page to only then the processing loading thing comes and then the server gets the request for page two so the data isn't loaded up front isn't pre loaded but it is loaded only that part on the request so in this case we request please server give us page three of the of the data and that's how it works in the code in controller we don't have to load anything we just load the blade file customer Ajax let's open this one and then in the table we download anything here either oh by the way important notice please if you use data tables don't forget to head antibody thing otherwise these tables wouldn't work the structure should be the correct HTML so yeah we don't load anything in body of the table instead we're loading it here so with data table functionality we add a little a few parameters so these two processing is true and server size true and ajax is the actual route we will call to get the data and that is that these are the columns that will actually show now route api customers index it's an API branch PHP I've created separate API controller for bigger projects which should probably separate slash API slash customers controller or something but I simplify here so API controller for API controller I return the data for customers for that I use a package called data tables tables this one I'm not sure how to pronounce that in the ir a-- data tables are all data tables which is a really simple package it's just basically daughter composer json it's this one and with lot about 5.5 we don't need to add anything to call config happening no facades no services so it's really simple to install you just add this and basically you're good to go so composer require this and then you can you can have this line in your in your controller important thing here information in default package documentation is kind of out and on github so if you try to use these they will work but maybe not optimized now please refer to the official link off of Yarra box calm and if you go here to a demo application the this is the code that is better to use so but in my case my code is this so I i construct the query the query note notice here I don't use get or all or anything like that here I just construct the query and the query is the parameters for data table there are some more parameters around dig deeper here a lot of options you can load the same the same data by using eloquent collection DB table query builder or whatever it's basically the same thing just in different syntax so yeah I load the query and I pass the query to data tables and there the result of that is actually a JSON so if we go into our table with all that again and I will show you how it actually works we load chrome chrome developer tools and in the network tab one of the request should be slash customers something so this is actually what happens slash ajax this one calls the the page itself which loads the table the empty table without any data and then at some point the ajax call goes to slash customers and not only slash customers but it adds the the data tables as a lot of fields here so what columns to load what search parameters are there what is the page what is the pagination and stuff like that and the result of that the response of that it's actually this thing so data tables has some kind of structure here so which draw is number one or number two total amount of Records and then the data is presented in JSON format and then it is automatically formatted by data tables JavaScript now why am I during two things data tables simple and data tables Ajax they are looking almost the same and what is the what is the advantage of using Ajax the advantage comes for bigger amount of data so now we're playing with 50 entries 50 customers and there's no difference basically visually you don't see the difference where there are a load simple table data tables or Ajax the load is pretty much the same now let's try 5,000 in our Factory not a factory the cedar detecting base you need let's change 50 to 5,000 let's clean up the database delete all the tables for us delete and run migration again great from scratch with seed I've actually left the default level tables users and password resets and this is how much cedar is taking now like it's loading 5,000 entries into the database but yeah pretty quick and now what we have here is customers and we have five thousand entries I'll show you so if we load by ID order by ID there are five thousand entries and what we have now on the page so if the load simple table one two three seconds and then some more front-end rendering so something like five seconds for simple table to load with five thousand entries what about data tables let's count that one two three four five six seven eight eight seconds so it's loading the same table the same five thousand entries and only then applies JavaScript to show only the tab and apply all the search it will actually work the same pretty quickly afterwards but the first load of the table will be really really slow especially if you have much more complicated queries like with joins a few tables some I don't feel some stuff like that and now let's try Ajax today's tables one two that's it so like one and a half seconds so that's the main advantage of using server-side or Ajax data tables because it's actually loading only ten records from the server it loads empty table and then ask the server please give me ten records because it's page one of off the off all the table if I click - it's processing again the data comes from the server but it comes only ten records and all the ten records are to process so so whenever you use bigger tables and bigger amount of data I strongly recommend to go Ajax way and final thing I want to show you is in our quick end in vowel this will be some kind of an advertisement so you can I can call it presented by Quicken in the panel this video so in our quick admin panel for for allowable admin panel generates we have that thing as a model as a module so in modules you can have Ajax data tables installed and then by default the server-side data tables and Ajax data tables will be applied I guess that's it for this video I will put the project on github it's already there actually I'll put the link here and in the description of YouTube video or you can copy it from here like not copy from video but you can see it here yeah that's it if you have any questions please add to YouTube comments and see you in the next videos of laravel daily video channel

Channel: Laravel Daily

Views: 37,902

Keywords: laravel

Id: 1wgLY-V69MM

Length: 14min 57sec (897 seconds)

Published: Tue Oct 03 2017