Laravel 8 Blog - 11: Integrate datatable in laravel | How to make search box & pagination in laravel

hey guys welcome back so guys in this video we are continuing our level blog series so guys now we are going to learn about how to integrate the data table in laravel application so this data table in the sense we are going to do a search box and pagination option for our display data in html tables okay so guys now let's see a demo so on this datatable.net website here we see a demo that you can see that the pagination type and here is your search option and the pagination also okay so we are going to integrate this data tables in our application so if you can find that css cdn link over here and gs link and the script so now let's begin it so guys let's get back to our editor first let's close all the files and yet where we have to integrate that in the users table and your post view also add in your category view also okay so first let's begin with the users table okay so yep let's go to resource views and here you move to admin users and your index blade file so inside this you can find the master layout right so let's go to this master layout and include the css link and the js links so first let's go to data table and here you find css link copy this and go to editor so guys you can add after your any link and just paste that and let's go to the script here i'm going to paste after this so you can just copy this js link type the script and give src as equal to and paste that all set yep and now you can just copy this code and here you go with the script tag so guys one thing you should need that to work this document or dollar and all you need one jquery cdn link okay so i have just already pasted this jquery so let's save and now guys this is your my table okay so instead of my table let's tell my data table now let's copy this and go to the user table and just paste that id in the table heading that's it so now you can find refresh cool so you can see that guys all the option is come over here okay so same concept goes with your post table okay so here you can see that designs are missing out just you can go to the examples and you can just search with bootstrap so here you see bootstrap four five whatever it's comfortable you can just add on that so i'm continuing like this only yep let's get back and go to the post index and just add that id in the table tag that's it and same concept with the category let's add that id and here you see okay so how this is working because it's already in the master blade so i have already paid that cdn links okay so it's working that's that way now let's view on post here you see your post all done search for php search for laravel okay and same with category done guys okay so now guys let me just show you how to integrate this bootstrap design also so i'll just bootstrap five and here you find that javascript and your css and the html table so this is an example which we don't require which we already have this okay so we just need this css link so you can find this is your bootstrap link but we don't require this we already have only just you need to copy with the second link so just copy the second link go to your master blade file and just link that so link css here you paste that all done so this is your bootstrap file and the javascript file be required we need this to this is already we have imported and the second one let's import this copy and this cdn link we already have i'll show you okay it's over here after this let's add a script and paste let's see so guys now let's get back and refresh so here we see bootstrap is applied over here but the css are missing guys like something has gone messy with the data table css because the bootstrap version has been updated okay so we are using bootstrap 5.1 but this bootstrap is giving us 5.0 okay so for that case guys it's messy okay so we can just inspect and just set up with our css let's set up that okay so i'm going to select here and with this page net so let's copy the css class and get back just add that a custom style style style paste here open and close let's close the padding to 0px important semicolon let me just let me align it copy and paste and same with the margin all done so let's see and yep let's refresh cool so the link is done and over here you can see that it's a little messy right so let's inspect that also and set it up so we are on the select and here you see width auto so instead that let's give it 50 percent so it's fine let's copy this and paste that so you can call this width width colon 50 and let's keep it as important okay save refresh done guys so guys we have successfully integrated our data tables in laravel application which means we have integrated the search box and the pagination also okay so guys in this video that's it thank you for watching this video and please subscribe like and share

Channel: Funda Of Web IT

Views: 9,303

Keywords: fundaofwebit, how to integrate datatable in laravel 8, integrate datatables in laravel 8, how to make search box and pagination in laravel 8, how to search box for html table in laravel 8, how to make search bar and pagination in laravel 8, laravel 8 search box and pagination, laravel 8 blog tutorial, laravel 8 blog project, how to create search bar and pagination in laravel

Id: YkFukdChh14

Length: 7min 45sec (465 seconds)

Published: Sun Feb 20 2022