20
04Bootstrap Responsive Date Pagination with PHP Mysql
Hi guys, today let us see something interesting of date pagination using php mysql bootstrap. Pagination is normally dividing the whole content into separate page. When the records exceed 1000 rows every programmer should paginate the record with query. This will prevent the data overloaded and help to browse the large amount of data easier. Whenever you want to implement pagination on your website, you will need several things. First, you will need a MySQL database which stores all the data that needs to be paginated. Then, you need to connect it to your webpage. This is the MySQL/PHP part of the code. Then, you will need to write code that accepts a query from a browser and sends it to the server. The server will then have to process the query, find the data that best matches the query and return the result to your browser. This is the PHP part of the code. Finally, you need to write HTML/CSS code to actually display your webpage as well as the results.
What is date pagination and how it works ?
Date pagination is to fetch the data from database by the respective date that we selected. We can also called them as date wise data filtering. When we select the date it will make an ajax call to get data from the database. The server get the date and processing the query to find the exact matches of the data according to that selected date and generate the output.The output is then return to the browser and display to the user in the HTML format.
Javascript - Date Paginator Call
$(window).ready(function(event) { selectedDate = '2016-04-17'; //Default Date var options = { selectedDate: selectedDate, onSelectedDateChanged: function(event, date) { //On Change event to select the date var d = new Date(date); passDate(d); // Function call } }; passDate(new Date(selectedDate)); $('#paginator').datepaginator(options); }); function passDate(d) { $('.loader').show(); date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); $.ajax({ type: 'POST', // define the type of HTTP verb we want to use (POST for our form) url: 'date-paginator.php', // the url where we want to POST data: 'date=' + date, // our data object }) // using the done promise callback .done(function(data) { $('.loader').hide(); // log data to the console so we can see $('.response').html(data); // here we will handle errors and validation messages }); }
Server-side PHP : Date Paginator
define("HOST", "localhost"); //Define a hostname define("USER", "root"); //Define a username define("PASSWORD", ""); //Define a password define("DB", "hackandphp"); //Define a database $con = mysqli_connect(HOST, USER, PASSWORD, DB) OR DIE("Error in connecting DB : " . mysqli_connect_error()); //Database connection if((!empty($_POST['date']))) { // Check whether the date is empty $date = date('Y-m-d',strtotime($_POST['date'])); $result = mysqli_query($con,'SELECT * from countries where date = "'.$date.'"'); // Execute the query $num_rows = mysqli_num_rows($result); //Check whether the result is greater than 0. if($num_rows > 0){ $str = ''; while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ //Fetching the data from the database $str.=''; echo $str; }else{ echo "
'; } $str.= 'No record found
"; } } else{ echo "No record found
"; }
By Thirumani Raj posted on - 20th Apr 2016
Social Oauth Login
Personalized Map Navigation
Online Image Compression Tool
Image CompressionAdvertisement
Recent Posts
- « Personalized Map Navigation
- « Remjs solves the problem of mobile terminal adaptation
- « Picture centered vertically
- « Colorful Diwali Wishes Share Via Whatsapp and Facebook
- « Get City and State by ZipCode Using Google Map Geocoding API