If you are looking for the AngularJS tutorial on Paginatin, we have described in this post how you can create pagination with AngularJS and PHP. If we have been working on a dynamic website with PHP to display the MySQL table data on the website in tabular form, we need pagination. Since using pagination a large amount of data is divided into different parts and only one row of lines is loaded on the website and it is assumed that the following data should be displayed, you have to click on the button of the following link if you click on the link click, you will be asked to retrieve the following data and display it in tabular form on the website without updating the website. For this reason, we have reduced the server load when using pagination, because if we have not used pagination, you retrieve all data from the database at the same time and also reduce the speed of our website. When using pagination, however, only a few data lines and the following data are loaded as a prerequisite.
Pagination is a required feature in web development and we want to do this feature with AngularJS with PHP. To perform paging with AngularJS with PHP, we used the AngularJS module "dirPagination". This module is used to create paging with AngularJS. With this module, we can easily page with any dynamic language with AngularJS, reduce our server-side code and directly create a pagination link. To do the paging with this AngularJS module, all we have to do is send data in JSON string format, and then it will be automatically converted to pagination using the pagination link. We just have to define how much data we display per page in the "itemsPerPage" option in the "dir-paginate" directory. This is the job of the directory, just like the ng-repeat directory. This directory allows us to print data on the website, but this directory was created by this AngularJS module.
If you are using AngularJS as the front end and PHP as the back end and you want your web application to be paginated, this tutorial is helpful. Because in this post we described PHP pagination with AngularJS. Below is the source code for pagination with AngularJS with PHP.
Pagination is a required feature in web development and we want to do this feature with AngularJS with PHP. To perform paging with AngularJS with PHP, we used the AngularJS module "dirPagination". This module is used to create paging with AngularJS. With this module, we can easily page with any dynamic language with AngularJS, reduce our server-side code and directly create a pagination link. To do the paging with this AngularJS module, all we have to do is send data in JSON string format, and then it will be automatically converted to pagination using the pagination link. We just have to define how much data we display per page in the "itemsPerPage" option in the "dir-paginate" directory. This is the job of the directory, just like the ng-repeat directory. This directory allows us to print data on the website, but this directory was created by this AngularJS module.
If you are using AngularJS as the front end and PHP as the back end and you want your web application to be paginated, this tutorial is helpful. Because in this post we described PHP pagination with AngularJS. Below is the source code for pagination with AngularJS with PHP.
Source Code
index.php
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Pagination In PHP Mysql 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">Pagination In PHP Mysql 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);
}
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.