How To Display Data From Database Using Bootstrap Responsive Table With Pagination

How To Display Data From Database Using Bootstrap Responsive Table With Pagination

Unknown 11:11 PM
Unknown
This video learn how to display data from database using bootstrap responsive table with pagination.

Before you start learn with me you have bootstrap

 step 1

 Go to download bootstrap from www.getbootstrap.com

 step 2

 Go to XAMPP and then create web project with display pagination

 step 3

 Extract bootstrap zip file to c:/xampp/htdocs/websitebootstrap/

 step 4

 Go to phpmyadmin and then create database name "maps"
CREATE DATABASE maps;

 and then create table "markers"

 CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

 and then insert data

 INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Pan Africa Market', '1521 1st Ave, Seattle, WA', '47.608941', '-122.340145', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Buddha Thai & Bar', '2222 2nd Ave, Seattle, WA', '47.613591', '-122.344394', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Melting Pot', '14 Mercer St, Seattle, WA', '47.624562', '-122.356442', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Ipanema Grill', '1225 1st Ave, Seattle, WA', '47.606366', '-122.337656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Sake House', '2230 1st Ave, Seattle, WA', '47.612825', '-122.34567', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Crab Pot', '1301 Alaskan Way, Seattle, WA', '47.605961', '-122.34036', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Mama\'s Mexican Kitchen', '2234 2nd Ave, Seattle, WA', '47.613975', '-122.345467', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Wingdome', '1416 E Olive Way, Seattle, WA', '47.617215', '-122.326584', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Piroshky Piroshky', '1908 Pike pl, Seattle, WA', '47.610127', '-122.342838', 'restaurant');

 and then write php codes for connect to database

config.php

 <?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "maps";

 $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");

?>

 and then create index.php

 <?php

 include('includes/config.php');

 $per_page = 5;
$adjacents = 5; 

 $pages_query = mysql_query("SELECT COUNT(id), name, address, lat, lng, type FROM markers") or die(mysql_error());

 //get total number of pages to be shown from  total result
$pages = ceil(mysql_result($pages_query, 0) / $per_page);

 //get current page from URL ,if not present set it to 1
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1 ;

 //calculate actual start page with respect to Mysql 
$start = ($page - 1) * $per_page;

 //execute a mysql query to retrieve  all result from current page by using LIMIT keyword in mysql
//if  query  fails stop further execution and show mysql error

 $query = mysql_query("SELECT id, name, address, lat, lng, type FROM markers LIMIT $start, $per_page") or die(mysql_error());

 $pagination="Pagination";
//if current page is first show first only else reduce 1 by current page
$Prev_Page = ($page==1)?1:$page - 1;

 //if current page is last show last  only else add  1 to  current page
$Next_Page = ($page>=$pages)?$page:$page + 1;

//if we are not on first page show first link
if($page!=1) $pagination.= '<a href="?page=1">First</a>';
//if we are not on first page show previous link
if($page!=1) $pagination.='<a href="?page='.$Prev_Page.'">Previous</a>';

 //we are going to display 5 links on pagination bar
$numberoflinks=5;

 //find the number of links to show on right of current page
$upage=ceil(($page)/$numberoflinks)*$numberoflinks;
//find the number of links to show on left of current page
$lpage=floor(($page)/$numberoflinks)*$numberoflinks;
//if  number of links on left of current page are zero we start from 1
$lpage=($lpage==0)?1:$lpage;
//find the number of links to show on right of current page and make sure it must be less than total number of pages
$upage=($lpage==$upage)?$upage+$numberoflinks:$upage;
if($upage>$pages)$upage=($pages-1);
//start building links from left to right of current page
for($x=$lpage; $x<=$upage; $x++){
//if current building link is current page we don't show link,we show as text else we show as linkn
$pagination.=($x == $page) ? ' <strong>'.$x.'</strong>' : ' <a href="?page='.$x.'">'.$x.'</a>' ;
}
//we show next link and last link if user doesn't on last page
if($page!=$pages) $pagination.=  '  <a href="?page='.$Next_Page.'">Next</a>';
if($page!=$pages) $pagination.=  ' <a href="?page='.$pages.'">Last</a>';
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>How To Display Data From Database Using Bootstrap Responsive Table With Pagination
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container-fluid">
<h3>Display Location Address</h3>
<div class="table-responsive">
 <table class="table">
   <tr>
    <th>Location</th>
    <th>Address</th>
    <th>Latitude</th>
    <th>Longtitude</th>
    <th>Type</th>
   </tr>
   <?php
while($row = mysql_fetch_array($query))
{
$f1 = $row['name'];
$f2 = $row['address'];
$f3 = $row['lat'];
$f4 = $row['lng'];
$f5 = $row['type'];
?>
<tr>
<td><?php echo $f1 ?></td>
<td><?php echo $f2 ?></td>
<td><?php echo $f3 ?></td>
<td><?php echo $f4 ?></td>
<td><?php echo $f5 ?></td>
</tr>
<?php
} //while
?>
 </table>
</div>
<nav>
 <ul class="pager">
   <li><a href="#"><?php echo $pagination; ?></a></li>    
 </ul>
</nav>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body>

Unknown

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »

Subscribe to: Post Comments (Atom)