AngularJS Pagination with PHP MySQL
If you looking for AngularJS pagination here you are in the right place. With the AngularJS, we going to display user data in the data table from MySQL using PHP. If you working on a dynamic website in that you try to load your MySQL data, this will help to reduce your weight from data loading. Here the process using PHP, we going to fetch the data from the MySQL database and with the help of AngularJS, we going to display the data without page refresh. Pagination help to improve your load by dividing the huge amount of data and part of the data will display the user details.
For user-friendly here we used pagination for separating a huge amount of data that will fetch the data from the database on every next click from the user. This will be divided into 5 different parts to display in the data table, each time the data will load from MySQL by clicking the next button in pagination. AngularJS will serve to increase the website speed to load the data quickly.
The main advantage of AngularJS is to reduce the code with effective data loading capacity. Using “dirPagination“, we going to create pagination, this will help to create the pagination and for defining how may data will we like to display per page for that we going to use “itemsPerPage”. Below you can see the code you can view the live preview also you can download and implement in your project.
Database
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
-- -- Table structure for table `users` -- CREATE TABLE `users` ( `id` int(11) NOT NULL, `user_name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`id`, `user_name`, `email`) VALUES -- -- Indexes for dumped tables -- -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13; COMMIT; |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <title> AngularJS Pagination with PHP MySQL - softAOX</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head> <body> <div class="container" ng-app="myPagination" ng-controller="pageController"> <br/> <h1 align="center"> AngularJS Pagination with PHP MySQL</h1> <br/> <br/> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>S. No</th> <th>User Name</th> <th>Email Address</th> </tr> </thead> <tbody> <tr dir-paginate="userData in myData|itemsPerPage:5"> <td>{{ userData.id }}</td> <td>{{ userData.user_name }}</td> <td>{{ userData.email }}</td> </tr> </tbody> </table> </div> <div class="col-md-12"> <dir-pagination-controls max-size="5" direction-links="true" boundary-links="true"> </dir-pagination-controls> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="dirPaginate.js"></script> <script> var pagination_app = angular.module('myPagination', ['angularUtils.directives.dirPagination']); pagination_app.controller('pageController', function($scope, $http) { $http.get('fetch.php').success(function(data) { $scope.myData = data; }); }); </script> </body> </html> |
fetch.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php $host = "localhost"; $db_user = "root"; $db_pass = ""; $dbname = "tut_angular"; $conn = new PDO("mysql:host=$host; dbname=$dbname", $db_user, $db_pass); $query = "SELECT * FROM users ORDER BY id ASC"; $pagefetch = $conn->prepare($query); if($pagefetch->execute()) { while($row = $pagefetch->fetch(PDO::FETCH_ASSOC)) { $data[] = $row; } echo json_encode($data); } ?> |
