PHP AngularJS MySQL Pagination Example
In this tutorial, I want to share with you simple example of php mysql pagination using angularjs. we will use dirPagination.js as Pagination Directive in angularjs paginate using php mysql database.
we will create step by step very basic example of server side pagination in angularjs. pagination is a basic requirement of every project. so here is a simple step of creating pagination with angularjs using php mysql database.
If you looking for crud application with angularjs and php then you can check my already written tutorial: PHP AngularJS CRUD with Search and Pagination Example From Scratch. You can check that also.
Here follow step by step tutorial of angularjs pagination.
Step 1: Create Users Table
First of all we need to use one table as "users". you can create users table using following mysql query. After that you need to add some dummy records on users table.
users table:
CREATE TABLE IF NOT EXISTS `users` (
`id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email_verified_at` timestamp NULL DEFAULT NULL,
`password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`status` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=203 ;
Step 2: Create Index.php file
In this step we need to create index.php file. In this file we will write angularjs code and write pagination code.
You need to download dirPagination.js file from here: Pagination Directive.
So let's write following code:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Angularjs PHP MySQL Pagination Example - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="dirPagination.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="paginateController">
<h3 align="center">Angularjs PHP MySQL Pagination Example - ItSolutionStuff.com</h3>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|itemsPerPage:5">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
<div align="right">
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</body>
<script type="text/javascript">
var myPaginateApp = angular.module('myApp', ['angularUtils.directives.dirPagination']);
myPaginateApp.controller('paginateController', function($scope, $http){
$http.get('api.php').success(function(data){
$scope.users = data;
});
});
</script>
</html>
Step 3: Create api.php file
Here, we will write code to getting data from database table. so let's create api.php file and write code as bellow:
api.php
<?php
$hostName = "localhost";
$username = "root";
$password = "root";
$dbname = "58_laravel";
$mysqli = new mysqli($hostName, $username, $password, $dbname);
$sql = "SELECT * FROM users";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data);
?>
Now you can check it.
I hope it can help you....
