Jquery Data table and paging
Set perfect view of table with use of jquery data table
Step 1 : create php file name 'index.php' and insert a code bellow .
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "Jquerydb";
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT * FROM trn_movies";
$result = mysqli_query($con, $query);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery datatable demo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
</head>
<body>
<div style="margin:0 auto; text-align:center; width:80%">
<h3>Jquery DataTable demo(PHP, MYSQL)</h3>
<table id="stdcode" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr >
<th>Film Name</th>
<th>Director</th>
<th>Release Year</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<?php $sn = 1;
foreach ($result as $resultSet) { ?>
<tr>
<th><?= $resultSet['film_name'] ?></th>
<th><?= $resultSet['director'] ?></th>
<th><?= $resultSet['release_year'] ?></th>
<th><?= $resultSet['movie_id'] ?></th>
</tr>
<?php $sn++;
} ?>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
$('#stdcode').DataTable();
});
</script>
</body>
</html>
Step 2 : Create db ('Jquerydb') and add table ('trn_movies') and fire this two queries .
CREATE TABLE `trn_movies` (
`movie_id` int(10) UNSIGNED NOT NULL,
`film_name` varchar(45) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
`director` varchar(45) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
`release_year` int(10) UNSIGNED NOT NULL
);
--
-- Dumping data for table `trn_movies`
--
INSERT INTO `trn_movies` (`movie_id`, `film_name`, `director`, `release_year`) VALUES
(1, 'Happy New Year', 'Farah Khan', 2014),
(2, 'Kill Dil', 'Shaad Ali', 2014),
(3, 'The Shaukeens', 'Abhishek Sharma', 2014),
(4, 'Kick', 'Sajid Nadiadwala', 2014),
(5, 'Bang Bang', 'Siddharth Anand', 2014),
(6, 'Ungli', 'Rensil DSilva', 2014),
(7, 'Happy Ending', ' Krishna D.K', 2014),
(8, 'Jai Ho', 'Sohail Khan', 2014),
(9, 'Lingaa', 'K. S. Ravikumar', 2015),
(10, 'Daawat-e-Ishq', 'Habib Faisal', 2014),
(11, 'Singham Returns', 'Rohit Shetty', 2014);
(12, 'Kill Dil', 'Shaad Ali', 2014),
(13, 'The Shaukeens', 'Abhishek Sharma', 2014),
(14, 'Kick', 'Sajid Nadiadwala', 2014),
(15, 'Bang Bang', 'Siddharth Anand', 2014),
(16, 'Ungli', 'Rensil DSilva', 2014),
(17, 'Happy Ending', ' Krishna D.K', 2014),
(18, 'Jai Ho', 'Sohail Khan', 2014),
(19, 'Lingaa', 'K. S. Ravikumar', 2015),
(20, 'Daawat-e-Ishq', 'Habib Faisal', 2014),
(21, 'Singham Returns', 'Rohit Shetty', 2014);
(22, 'Kill Dil', 'Shaad Ali', 2014),
(23, 'The Shaukeens', 'Abhishek Sharma', 2014),
(24, 'Kick', 'Sajid Nadiadwala', 2014),
(25, 'Bang Bang', 'Siddharth Anand', 2014),
(26, 'Ungli', 'Rensil DSilva', 2014),
(27, 'Happy Ending', ' Krishna D.K', 2014),
(28, 'Jai Ho', 'Sohail Khan', 2014),
(29, 'Lingaa', 'K. S. Ravikumar', 2015),
(30, 'Daawat-e-Ishq', 'Habib Faisal', 2014),
(31, 'Singham Returns', 'Rohit Shetty', 2014);
0 comments:
Post a Comment