Bootstrap 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.

Responsive Date Pagination Bootstrap

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));


function passDate(d) {
    date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            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) {
            // log data to the console so we can see
            // 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.='


ISO Code :'.$row['countries_iso_code'].'

ISD Code :'.$row['countries_isd_code'].'

Created Date: '.$row['date'].'

'; } $str.= '
'; echo $str; }else{ echo "

No record found

"; } } else{ echo "

No record found

"; }

By posted on - 20th Apr 2016

Social Oauth Login

Personalized Map Navigation

Online Image Compression Tool

Image Compression


Recent Posts