How to implement DataTables on Table using PHP/MySQLi

How to implement DataTables on Table using PHP/MySQLi

In this Post We Will Explain About is How to implement DataTables on Table using PHP/MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to DataTable in Php,Mysql and Ajax Example

In this post we will show you Best way to implement php jquery datatables, hear for PHP – jquery datatables with mysql database example from scratch with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Creating Simple Database

Step 1. First of all Open phpMyAdmin.
setp 2. after that Click the databases on phpMyAdmin, make a simple Like as database and (live24u)name it as using datatable.
step 3. And then the making a simple database, click the mySQL and copy paste the below simple source codes.

Also Read :   AngularJS Inline Edit using PHP with MySQLi

CREATE TABLE `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `user_fname` varchar(30) NOT NULL,
  `user_lname` varchar(30) NOT NULL,
  `user_address` text NOT NULL,
PRIMARY KEY(`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Insert Dump Data in phpMyAdmin

INSERT INTO `users` (`user_id`, `user_fname`, `user_lname`, `user_address`) VALUES
(1, 'Chirag', 'Tapla', 'upla katha 3, swaminarayan krupa'),
(2, 'tapla', 'chirag', 'gujan. of E.B. jesadiya, forxcharge'),
(3, 'pradeep', 'Designer', 'anjali char rasta, pramukh krupa'),
(4, 'Ashish', 'Sharing', 'balaji, dhebar road');

index.php

Here Last step, We are going to make our index.php file which contains our data html simple table, php source code in getting all the data from our Mysql database and jquery Data Table script.

Also Read :   Simple PHP Shopping Cart

index.php

<!DOCTYPE html>
<html>
<head>
<title>How to implement Data Table on Table using PHP/MySQLi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
">	
<!-- include google Fonts -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
	<!-- data table css -->
<link rel="stylesheet" href="http://live24u.com/datatable/dataTables.bootstrap.min.css">
</head>
<body>
	<div class="live container">
		<h1 class="page-header live text-center">Step By Step implement Data Table on Table using PHP/MySQLi</h1>
		<div class="live col-md-8 col-md-offset-2">
			<table class="table table-bordered live table-striped" id="live_datatable">
				<thead>
					<th>USER ID</th>
					<th>User Firstname</th>
					<th>User Lastname</th>
					<th>User Address</th>
				</thead>
				<tbody>
					<?php
						//live database connection
						$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_DATABASE_PASSWORD', 'live24u');
						if ($db_con->connect_error){
							die("Connection Failed". $db_con->connect_error);
						}
 
						$sql = "select * from users";
						$query = $db_con->query($sql);
						while($data_row=$query->fetch_array()){
							?>
							<tr>
								<td><?php echo $data_row['user_id']; ?></td>
								<td><?php echo $data_row['user_fname']; ?></td>
								<td><?php echo $data_row['user_lname']; ?></td>
								<td><?php echo $data_row['user_address']; ?></td>
							</tr>
							<?php
						}
					?>
				</tbody>
			</table>
		</div>
	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- http://live24u.com/ data table js -->
<script src="http://live24u.com/datatable/jquery.dataTables.min.js"></script>
<script src="http://live24u.com/datatable/dataTables.bootstrap.min.js"></script>
	<script>
	  $(function () {
	    $('#live_datatable').DataTable({
		  'searching'   : false, //for searching
	      'ordering'    : true, //for ordering-sorting
	      'info'        : true, //for info
	      'autoWidth'   : false //for autoWidth
	      'paging'      : true, //for paging
	      'lengthChange': false //for lengthChange
	    })
	  })
	</script>
</body>
</html>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   PHP Vue.js Live Search Box Using MySQL





Example

I hope you have Got What is Datatable Pagination, Sorting and Search And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.