Live Data Search with Pagination in PHP Mysql using Ajax

hello friends in this video tutorial we are going to learn how to make feature like live search my SQL database table with pagination by using PHP script with Ajax if you store data in my SQL table and load on web page in HTML table format then for filter data here we will make live data search feature and with live data search feature here we have also make pagination so all search data will not be display on single web page but it will be load large set of data into smaller chunks of data so it not only reduces scroll while reading of data but also it reduces the web page loading speed also because it divided data into different page division also so in this tutorial we will make Ajax live data search feature with pagination feature also by using PHP script with Ajax now let's start discussing this topic so this is our testing database here we have one table and in this table we have store data we will make live data search with pagination feature by using this data this is our working folder first we have open index dot PHP file and in this file we have already included jQuery library link bootstrap library link in header of page for search data here we have right input type is equal to text name and ID is equal to search box user can search data by enter query into the search box below this textbox we have right division tag with ID is equal to dynamic content under this tag we will load data from my SQL table with pagination linked by using PHP script with Ajax now we have go to jQuery code part and here we have make load data function with two argument and query under this function we have start right Ajax and in this first option we have right URL options set to fetch dot PHP file it will send request to this file in second option we have right method and here we have used post method for send data to server in third option we have right data and in this option we can define which data we want send to server so here we have send page variable value and query variable value as data sent to server lastly we have rightt success callback function this function will be called if request completed successfully and it will receive data from server under this function we have right division tag with ID is equal to dynamic content with HTML method and under this we have right data so it will display data under this tag now we have go to fetch dot PHP file and here first we want to make database connection so here we have write dollar connect variable as equal to new to class under this we have write my SQL host is equal to local host database name set to testing username set to root and password set to blank value it will my SQL make database connection below this we have right dollar limit variable is equal to five so it will display five records on webpage and four view other records we have to click on pagination link after this we have right dollar pages equal to one in this variable we will store page number value below this we have right if statement and under condition we have right dollar post page variable value is greater than one if this condition true then it will execute if block of code under this block we have rightt dollars start variable is equal to dollar post page variable value minus one into dollar limit variable value it will calculate the row number from which data has been start fetch after this we have right dollar page variable as equal to dollar post page variable value now suppose above condition Falls then it will execute else block of code and under this block we have right dollars start variable value is equal to zero now we have start right select query with search data with paginate for this here we have right dollar query variable as equal to select star from Webb's lesson post table after this we have right if statement and under condition we have right dollar post query variable value is not equal to blank this condition will check if dollar post query variable value has some value then it will execute if block of code under this block we have right dollar query variable and here we have a penned query like where Webb's lesson post title like string replace function you and under this function in argument we have right space in second argument we have right percentage and in third argument we have right dollar post query variable it will replace space with percentage and it will append search query under select query after this we have again right dollar query variable and here we have a pend query like order by webs lesson post ID in ascending order it will add sorting order in query now we have right dollar filter query variable as equal to query variable and here we have a pend query with limit statement with value of dollars start variable and dollar limit variable here it will make another Select query with limit statement first we want to execute select query which we have store in dollar query variable so here we have write dollars statement variable as equal to dollar connect variable with prepare statement with dollar query variable it will make query for execution which we have store under dollar query variable and for execute that query we have write dollars statement variable with execute method it will execute query after execute query we have write dollar total data variable is equal to dollar statement variable with row count method this method will return total number rows affected after query execution same way we want to execute select query which we have store under dollar filter query variable so here we have write dollars statement variable as equal to dollar connect variable with preparer statement and under this we have write dollar filter query variable and for execute query which we have store under dollar filter query variable here we have write dollars statement variable with execute method it will store select query which we have store under dollar filter query variable now we have right dollar result variable is equal to dollar statement variable with fetch all method it will return query execution result which we have store under dollar result variable after this we have right dollar output variable as equal to label tag and under this we have write total records text with dollar total data variable it will display number of Records on webpage below this we have make one table with two table column like ID and post title now we have write if statement and under condition we have write dollar total data variable value is greater than zero if this condition false that means there is no data found and it will execute else block of code and under this we have write dollar output variable and in this we have append this HTML code with message like no data found but suppose above condition true then it will execute if block of code and under this block we have right for each loop and under condition we have right dollar result variable as dollar row variable it will fetch data from dollar result variable under this loop we have right dollar output variable and in this we have append this HTML code in first column we want to display post ID data so here we have right dollar row Webb's lesson post ID variable same way in second column we want to display post title so here we have write dollar row Webb's lesson post title it will display post title under this column so this way we have store data in HTML format in this dollar output variable now we want to make pagination so here we have write an order list tag with class is equal to pagination this is bootstrap library class now we have right dollar total links variable is equal to seal function and under this we have right dollar total data variable divided by dollar limit variable it will calculate total number of pagination links after this we have right dollar previous link variable is equal to blank value under this we will store previous page pagination link same way for store next page pagination link here we have right dollar next link variable is equal to blank value and for store page number pagination link here we have right dollar page link variable is equal to blank value now first we want to make page number array so from that array we can directly make pagination linked with previous and next page link also for this things we have right if statement and under condition we have right dollar total links variable value is greater than 4 if this condition false then it will execute else block of code under this block we have right for a loop and under condition we have right dollar count variable value is equal to one dollar count variable value is less than equal to value of dollar total links variable and dollar count variable value is increment by one under this loop we have right dollar page or a variable is equal to dollar count variable so on every interval it will store page number under this dollar page or a variable in array format but supposed dollar total links variable value is greater than four then it will execute if block of code and under this block we have again right if statement and under condition we have right dollar page variable value is less than five if this condition true then it will execute if block of code under this block we have right dollar count variable value is equal to one dollar count variable value is less than equal to five and dollar count variable value is increment by one under this loop we have right dollar page or a variable is equal to dollar count variable so on every interval it will store page number under this dollar page or a variable in a ray format after storing number up to five number now we want to store blank data in this array for this we have right dollar page array variable as equal to three dot and lastly in this array we want to store last page number for this we have right dollar page array variable as equal to dollar total links variable value so if dollar page variable is less than five then in page array it will store up to five number and last page number but suppose dollar page variable value is greater than five then it will execute else block of code and under this block we have right dollar and limit variable is equal to dollar total links variable value minus one five below this we have right if statement and under condition we have right dollar page variable value is greater than the value of dollar and limit variable value if this condition true then it will execute if block of code under this block first we have right dollar page array variable is equal to one number so here we have store page number in array after this we want to store blank data with three dot so here again we have right dollar page array variable is equal to three dot and for store last five page number we have right dollar count variable value is equal to value of dollar and limit variable value dollar count variable value is less than equal to value of dollar total links variable value and dollar count variable value is increment by one under this loop we have right dollar page or a variable is equal to dollar count variable so on every interval it will store page number under this dollar page or a variable in a ray format but suppose above condition false then it will execute else block of code and under this first we have right dollar page or a variable as equal to one number so here we have store page number in array after this we want to store blank data with three dot so here again we have right dollar page array variable is equal to three dot and forced or middle page number we have right dollar count variable value is equal to value of dollar page variable minus one dollar count variable value is less than equal to value of dollar page variable plus one and dollar count variable value is increment by one under this loop we have right dollar page or a variable is equal to dollar count variable so on every interval it will store page number four make middle page number pagination link here we want to again store blank number with three dots so here we have right page array variable as equal to three dots and lastly we want to store last page number so here we have right dollar page or a variable as equal to dollar total links variable value so this way we have store page number from which we will make pagination link we have store in dollar page or a variable now for make pagination link here we have right for loop and under condition we have right dollar count variable value is equal to zero dollar count variable value is less than the value of count function with dollar page array variable and count variable value increment by one under this loop we have right if statement and under condition we have right dollar page variable value is equal to value of dollar page array with dollar count variable value if this condition true then it will execute if block of code and here we have right dollar page link variable and here we have append this HTML code it will make pagination linked for active page and for a display page number here we have right dollar page array with dollar count variable value as index under this if block we will also make previous page pagination link and next page pagination link for this here we have right dollar previous ID variable value is equal to dollar page array with index dollar count variable value minus one from this code we can get value of previous page below this we have write if statement and under condition we have write dollar previous ID variable value is greater than zero if condition true then it will make clickable previous page link under this block we have right dollar previous link variable is equal to list tag with class is equal to page item in anchor tag we have right class is equal to page link you this class value we will use as selector in jQuery code here we have add data page number attribute is equal to dollar previous ID variable value so here we have store previous page number under this data page number attribute but suppose above condition false then here we have right dollar previous link variable as equal to this HTML code it will make disable previous page link same way for make next page pagination link here we have right dollar next ID variable is equal to dollar page array with dollar count variable value plus one this code will get the value of next page number now we have write if statement and under condition we have write dollar next ID variable value is greater than equal to value of dollar total links variable value if this condition true then it will execute if block of code and here we have right dollar next link variable is equal to this HTML code it will make disable next page pagination link but suppose above condition true then it will execute else block of code and under this block we have right dollar next link variable is equal to list tag with class is equal to page item under this we have right anchor tag with class is equal to page link and data page number attribute is equal to dollar next ID variable value it will make clickable next page link now suppose this condition false then it will execute else block of code and here we have right if statement and under condition we have right dollar page or a variable with dollar count variable value is equal to three dot if this condition true and it will execute if block of code and here we have right dollar page link variable and here we have append this HTML code it will make disable pagination link but suppose above condition false then it will execute else block of code and here we have right dollar page link variable and here we have a pen de CH T ml code like list tag with classes equal Tom page item under this list tag we have right anchor tag with class is equal to page link we will use this class as selector in jQuery code here we have also add data page number attribute is equal to dollar page or a variable with dollar count variable value as index and for print page number also we have write this dollar page array variable so here we have store previous page link in dollar previous link variable page number link in dollar page link variable and next page link in dollar next link variable now want to combine it so here we have right dollar output variable and here we have a pen data like dollar previous linked variable value dollar page link variable value and dollar next link variable value so here we have store pagination link data under this dollar output variable now we want to send to Ajax request so here we have write echo statement with dollar output variable value now we have go to index dot PHP file and here we have called load data function with page number argument value as 1 so when page has been loaded then it will call this function now we have check output in browser friends here we can see when page has been load in to browser then on web page we can see data in HTML table and at above table we can see one text box for search data but when we have tried to type in search text box then it has filter data for filter data first we have go to index page and here we have right dollar with text box ID search box with key up method so when we have type in text box then this block of code will execute under this block we have right dollar query variable is equal to dollar with textbox ID with value method it will fetch the value from textbox and store in query variable below this we have right load data function in first argument we have write one and in second argument we have right query variable so it will search data and according that search data it will make pagination link so here friends first we have refresh webpage and after this on web page we can see text box and below we can see data in HTML table now in search text box we have type PHP after type this query then below in table we can see number of pagination link has been reduced and number of data has been reduced because it has filter data according to search query and based on that filter data it has make pagination link which we can see below but currently when we have click on pagination link not any action has been performed for this thing's we have go to index page and here we have right dollar document selector with on method and under this we have right click event with anchor tag class page link so when we have click on pagination link then this code will execute under this first we have right page variable is equal to dollar this with data method and under this we have right page number it will fetch the value from data page number attribute a pagination link on which we have clicked after this forget the value of search text box here we have write query variable as equal to dollar with text box ID search box with value method it will fetch value from search text box now we have right load data function with two arguments like page variable and query variable value so when we have click on particular pagination link then that link data will be display on web page friends again we have refresh page and after this we have on webpage we can see one text box below text box we can see number of total records and last five data on webpage in table format and below table we can see pagination links so first we have click on any pagination link after click on link we can see that page data has been load on web page so here pagination has been working properly now in search text box we have type PHP my SQL so based on this search query here we can see total records figure has been changed and in table also we can see data in which PHP and my SQL text has been appear so here live data search feature has been working and below table we can also see the pagination link has been reduced no we have click on pagination link then that link data has been load on web page so in this tutorial we have make Ajax live data search with pagination feature by using PHP script 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

Channel: Webslesson

Views: 16,202

Keywords: ajax pagination with search, simple pagination with search in php, php ajax pagination with search, php search with pagination, ajax pagination with search php, ajax pagination with search in php, ajax pagination, ajax live search, ajax search with pagination in php, ajax pagination php, search, pagination, pagination with search, pagination with search in php, live search with pagination in php, php ajax search with pagination, php mysql ajax search pagination, php, ajax, mysql

Id: lzxGegyi37E

Length: 35min 17sec (2117 seconds)

Published: Tue Feb 04 2020