Home AngularJs Angularjs PHP MySQL Pagination Example

Angularjs PHP MySQL Pagination Example

by Shahriar Sagor
Angularjs PHP MySQL Pagination

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:

  `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:


<!DOCTYPE html>
    <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>
<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">
                <tr dir-paginate="user in users|itemsPerPage:5">
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
   <div align="right">
        <dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" >
<script type="text/javascript">
    var myPaginateApp = angular.module('myApp', ['angularUtils.directives.dirPagination']);
    myPaginateApp.controller('paginateController', function($scope, $http){
            $scope.users = data;

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:


    $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


You may also like

Leave a Comment