If you are looking for AngularJS tutorial on paginatin then in this post we have describe how to make pagination by using AngularJS with PHP. If we have working on any dynamic website by using PHP then for display mysql table data on web page in tabular format then we would required pagination. Because by using Pagination, it will divided large amount of data into different part and it will load only some number of rows on web page and suppose we want to see next data then we have to click on next link button, so when we have click on link then it has send request for fetch next data and display on web page in tabular format without refresh of web page. So by using Pagination we have reduce server load, because if we have not use pagination then it will fetch all data from database at the same time and it will reduce our website speed also. But by using pagination it will load only some rows of data and it will load next data as pere requirement.
Pagination is a required feature in web development and this feature we want to make by using AngularJS with PHP. For make pagination by using AngularJS with PHP, for this we have use "dirPagination" AngularJS module, this module is for create pagination with AngularJS. By using this module we can easily pagination by using AngularJS with any dynamic language and it has reduce our server side code and it has directly make pagination link. For make pagination by using this AngularJS module we have to just send data in JSON string format then it will automatically convert this data into pagination with pagination link. We have to just define how many data we have display per page in "itemsPerPage" option of "dir-paginate" directoyr. This is directory work as same like ng-repeat directory. By using this directory we can print data on web page but this directory has been make by this AngularJS module.
So, if you are using AngularJS as front-end and PHP as backend and we want to make pagination in your web application then this tutorial will helpful. Because in this post we have describe PHP pagination using AngularJS. Below you can find source code of Pagination using AngularJS with PHP.
Source Code
index.php
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Mysql Pagination using AngularJS</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="dirPaginate.js"></script>
</head>
<body>
<div class="container" ng-app="paginationApp" ng-controller="paginationController">
<br />
<h3 align="center">PHP Mysql Pagination using AngularJS</h3>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Student Name</th>
<th>Student Phone</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="singleData in allData|itemsPerPage:10">
<td>{{ singleData.student_name }}</td>
<td>{{ singleData.student_phone }}</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>
</html>
<script>
var pagination_app = angular.module('paginationApp', ['angularUtils.directives.dirPagination']);
pagination_app.controller('paginationController', function($scope, $http){
$http.get('fetch.php').success(function(data){
$scope.allData = data;
});
});
</script>
fetch.php
<?php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "SELECT * FROM tbl_student ORDER BY student_id DESC";
$statement = $connect->prepare($query);
if($statement->execute())
{
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
Hi good job bro. Kindly add 'view-all' link and show how it works on a paginated table. Thank you in advance
ReplyDeletehow to add row number if i am using district command
ReplyDeleteHow to make custom pegination angular js with php ?
ReplyDelete