Laravel 5.8 Tutorial - Datatables Individual Column Searching using Ajax

hello friends in this video tutorial we are going to learn how can we filter or searching data tables data based on value of particular column value in law revell 5.8 framework if you want to learn individual column searching in Louisville data tables then this tutorial will help you because here we have share tutorial on Louisville data tables individual column searching using Ajax jQuery in web development there are some event when we want to filter data tables data based on value of specific column then at that time we want to make server-side script for filter laravel data tables data based on value of individual column by using Ajax jQuery now let's start discussing this topic this is our testing database here we have two table like category and product in category table we have store product category and in product table we have store product details of different category we will fetch data from this two table by make join and load in laravel data tables then after we want to filter or search product based on category column by using jQuery AJAX this is our Louisville working folder first we want to make database connection so we have opened this dot env file and here we have defined my SQL database configuration like host name set to local host database name set to testing username set to root and password set to blank now we want to make controller so we have go to command prompt and here we have write this command this command will make column searching controller file under controllers folder now we have go-to controllers folder and we have opened this column searching controller file under this first we have right used statement with database class this is for database operation now we want to download your data tables package in this Louisville application so we have go to command prompt and write following command this command will download your data tables package in our eval application it will take some time for download after successfully download of your data tables package and install now we have go to config folder an open app dot PHP file in this file we have to define service provider and alias details this is required for use of your allure Ravel data tables package in this application now we have go to column searching controller and under this we have make one index function with request argument this is the root method of this controller class under this method we have right dollar category variable as equal to database class with table method and under this we have right category table after this we have ad select method and under this we have right star that means it will select category table all column data lastly we have right get method it will execute this select query and return data in a ray format which we have store under dollar category variable now we want to send this data to view file so here we have write return statement with view method and under this first we have right column searching view file name and in second argument we have right compact method and under this we have right category variable by using this method we can use category variable for fetch data from this variable now we have go-to resources folder / views folder and open column searching dot blade dot PHP file in this file we have already loaded jQuery library bootstrap library and jQuery datatable library first here we have create one table with ID is equal to product table we will initialize jQuery data table on this table under this table we have create four table column in first table column we have write serial no in second we have write product name in third we will make drop down list with category name and for column we have write product price you in third table column we have right select tag with attribute name and ID is equal to category filter and class is equal to bootstrap form control class here we have right at the rate for each loop laravel expression with condition like dollar category as dollar row variable first we have closed this loop so here we have right at the rate end for each expression between this we have right option tag with value attribute is equal to open and close Louisville expression and between this we have right dollar row with category ID so here in value attribute we have store category ID now in option text we have again right open and close larval expression and between this we have right dollar row with category name so in option value it will display category name this code will fill this select box with category list now we have moved to write jQuery code so here first we have make function with name fetch data with argument like category is equal to blank under this function we have right dollar with table ID product data with data table method this method will activate jQuery data table plug-in on this product table under this method we have right first option processing set to true this option will enable the display of a processing indicator when the table is being processed in second option we have right server-side set to true this option will switch client-side processing to server-side processing option we have right Ajax and under this we have right URL option which has been set to Louisville expression and between this expression we have right root method and under this we have right column searching dot index it will send Ajax requests to index method of column searching controller after this we want to send category data also so here we have write data option and here we have defined category argument as data so it will send this data with Ajax request below this we have right columns option which has been used to define table column details under this array we have right data option set to ID and name set to ID here we have defined product table column details for product table column data here we have add new node with data option set to name and name option set to product name column name same way for a display category table column data so here we have add new node with data option set to address name and name option set to category name in this we want to disable default data table sorting so here we have add new option orderable which has been set to false it will disable default sorting after this for display product price data so here we have add new node with data option set to product table column price and in name option set to price now we have moved to write PHP code so we have go to index method of column searching controller and here we have write if statement and under condition we have write request method with Ajax method this condition will be true if it has received Ajax request suppose this condition true then it will execute if block of code under this block we have again write if statement and under condition we have write dollar request variable with category variable if this variable has some value then it will execute if block of code under this block we have write dollar data variable as equal to database class with table method and under this we have write product table it will make select query here we want to fetch data from product and category table so here we have joined method and under this we have write for argument in first argument we have write category table in second argument we have write category dot category ID in third argument we have write equal to and in last argument we have write product category it will make inner join query after this we have right select method and under this we have defined table column like product dot ID product table dot name category table dot category name and product table dot price now we have right where method and under this we have right product table category table column and dollar request with category object it will add wear condition under select query but suppose category variable has no value then it will execute else block of code so under this block we have right dollar data variable as equal to database class with table method and under this we have right product table here we want to fetch data from product and category table so here we have joined method and under this we have write for argument in first argument we have write category table in second argument we have write category dot category ID in third argument we have write equal to and in last argument we have write product category it will make inner join query after this we have write select method and under this we have defined table column like product dot ID product table dot name category table dot category name and product table dot price now here we have write return statement with data tables method this method will make new instance of data table from source after this we have right of method and under this we have right dollar data variable lastly we have right make method with arguments set to true it will return unsaved model instance now we have again go to column searching dot blade dot PHP file and here we have called fetch data function so when page has been loaded this function will be called and it will load data in data table now four individual column filter here we have right dollar with select box ID category filter with change event so when we have select category from select box then this code will execute under this we have right categoryid variable is equal to dollar with select box ID category filter with value method it will store selected category ID under this category ID variable below this we have right dollar with table ID table dot data table method dot destroying method it will destroy data table after this we have called date of function with argument like categoryid it will load filter data in data table based on value of category ID now we want to set route of index method of column searching controller so we have go-to routes folder web dot PHP file here we have right root class with resource method with two argument in first argument we have right column searching and in second argument we have right column searching controller this code will set route of index method of column searching controller now we want to run laravel application for this we have go to command prompt prompt here we have right PHP artisan serve command it will start Louisville server and return base URL of Louisville application now we have check output in browser friends first we have refreshed this page and now we can see product data on webpage in tabular format now we want to get only mobile category data on webpage so here we have select mobile category after selecting of mobile category we have got only mobile category data under data table without refresh of web page but now we want to get all data so we have select first option after selecting first option we have got all product data on web page without refresh of web page this way we can filter table data according to selection from select box and after selecting category we have got data according to select box category selection you can make this type of filter for all table column also here we have discussed only one table column filter you can do this things with all column also if you have any query or input regarding this video tutorial please comment your query or input in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 11,276

Keywords: laravel datatables dropdown filter, laravel datatables filter column, laravel datatables custom search, laravel datatables ajax, laravel datatables yajra, laravel datatable individual column search, laravel datatables column filter, individual column searching, individual column search in datatable, laravel datatables filter dropdownlist, laravel datatables individual column filtering, custom filter datatable laravel, custom filtering datatables server side laravel

Id: YcrDCi0hjr4

Length: 20min 4sec (1204 seconds)

Published: Mon Aug 19 2019