Angularjs PHP MySQL Pagination Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hello Devs
Welcome back again. Today in this tutorial, i want to share with you a very simple example Angularjs PHP MySQL Pagination. We will use here dirPagination.js for Pagination. Directive in angularjs paginate by using php and mysql database.

Now we will create it step by step with a very basic and simpe example of server side pagination in angularjs. Pagination is a very basic requirement of every real life project. So here is a very simple step for creating pagination with angularjs by using php and mysql database.

If you looking for a good crud application with angularjs and php then you can check my tutorial. Already written basic tutorial: PHP AngularJS CRUD with Search and Pagination Example From Scratch. If you want you can check that also.

Now here follow few step tutorial of angularjs pagination.

Step 1: Create Users Table

First of all we need a table as “users”. We can create a users table by using following mysql query. And after that we aslo need to add some dummy records on our 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 a index.php file. Now in this file we will write angularjs code and also write pagination code.

Now we need to download dirPagination.js file from here: Pagination Directive.

So now let’s write following code:

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Angularjs PHP MySQL Pagination Example - CodingsPoint.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 - CodingsPoint.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>

Read Also : MYSQL Query for Data between Two Dates Example

Step 3: Create api.php file

Here now on this step, we will write some code to getting data from our database table. So let’s create a 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 we can check it.

I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 4 =