Filter data using jQuery Ajax | Filter drop down list | PHP Tutorial

hello welcome back to my channel today i am gonna show you how you can search or filter data in php using ajax let's get started create a folder under your www or htdocs folder and give it a name here i am giving ajax under this folder creator uploads folder in this folder we will keep our images drag this folder into your editor create a file under ajax folder called index.php before writing the code let's copy the bootstrap cdn search bootstrap 4cdn on google and click on this link click this button and copy these cdns and paste them into your file now let's create the filter code create a div with id filters later we will add css using this id under this div open a select tag with a name attribute and an id i'm using same name fetch val for both the attributes give five options first select filter and make it disabled and selected [Music] rest of the options are advertisement technology education and fashion and for now leave this value attribute empty now let's add some css i am using internal css here i am using helvetica font here now create another div with class container after the filter div this is the bootstrap class under this div open a table tag with a class called table which is a bootstrap class give the table headings [Music] these are the tables headings now we will add some text before the select option [Music] now let's style the div with id filters now in another row of the table we will show our data leave these td tag empty for now create a config.php file to make the database connection make a variable called con and write the connection code we will create a database called filters now let's create the database filters and under this db create a table called post i am defining the table columns here as you can see we have created our table now we will include config.php file to our index page now we will fetch the data from the database using mysqli queries i am using mysqli fetch association.php function here close the while loop ending brace after the trn tag now i am displaying the data using td tag make sure you will use the same column name as you have used in your database now i will insert the data in the database here i am using the same data as in my existing database for insertion now i am exporting my existing table called post and i will import this table to my filters databases table called post table post is imported successfully as you can see data is fetched but images are not shown now we will use img html tag here as you can see it is still not showing the images for displaying the images we have to keep our images in the uploads folder let's put the images in the uploads folder as we kept our images in the uploads folder that's why we have to add the uploads folder name before the name of the image now to make it look good and responsive we have to give this img tag a class called img responsive and img thumbnail which is of bootstrap and set its width to 150. now as you can see our data is properly fetched now we will add jquery ajax use the select tag id here this code means on changing the value of the select tag it will display an alert box with the value of the select tag option that we choose to select as you can see here our code is perfectly working but not displaying the value so in order to display the value we have to give a value to the value attribute i am giving the same value as i used for option now let's check again as you can see it is now displaying the value of the select tag option now let's add the jquery ajax this code means after changing the value of the select tag option the page will be redirected to the fetch.php this data option contains a variable called request whose value is the value of the select tag option before fetching the data based upon filter we will show a text called working in the div whose classes container using jquery.html method when the data is fetched properly then the data will be shown in the div whose classes container using jquery.html method now create a fetch.php file under your ajax folder now we will write the code for fetch.php first include the config.php file now we will check that if the variable called request is set then we will store it in the same name variable next we will create a query to select the data from the database using where clause this query means we want that data to be selected whose title will be equal to the request variables value for example if we will choose education from the select tag options then that row whose the p underscore title column contains education then that data will be fetched we have to create account named variable to check that if any matched data contains in the database then the data will be fetched including tables headings otherwise it shows no record message and also tables headings will not be shown copy the table headings from the index.php file and paste it in your fetch.php file you can see here i have used count variables if and else braces only for tables headings now we will write the code to fetch the data you can also put this part after the while loop end brace here i am using my sqli fetch association php function [Music] remove this while loop and brace from here copy the fetch code from index.php file and again paste it in your fetch.php file now put the while loop end brace after trn tag now close if is it php function using end brace now let's test the code as you can see it is not working let's check the jquery ajax code as you can see we have not passed the data parameter in the success function let's pass it now now let's test the code again as you can see our data is successfully fetched now now i will choose fashion from the options as you can see it is showing no record message and table headings are also not visible data is fetching at a very fast rate as we had add before zen function in jquery code in which we had written the text working and it is not showing here to prevent this we have to add a sleep php function in the fetch.php file [Music] now as you can see it is showing the text working so this is it for today hope you liked and learned something from this if you do then hit a like and subscribe to my channel bye

Channel: WebsiteGeek

Views: 13,437

Keywords: Coding, jQuery Ajax with Validation, website, code, java, jquery, scrpt, script, javascript, registration, form, login, in, Ajax, tutorial, validation, error, php, wordpress, html, how, to, howto, beginners, responsive, media, queries, coder, Decode, Easy Tutorials, mysqli, CSS, web design, www, programming, json, response, guide, development, formdata, database, ajax, filter, filteration, search, livesearch, live, filters, lavarel, cookies, session, data, filtertable, table, bootstrap 4, bootstrap, class, img, list, drop, down, dropdown, excel

Id: ygzfmRjVaV0

Length: 10min 11sec (611 seconds)

Published: Fri Jan 08 2021