PHP AngularJS MySQL Pagination Example

By Hardik Savani May 14, 2024 Category : PHP Bootstrap MySql Angular

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>

Read Also: Codeigniter 3 and AngularJS CRUD with Search and Pagination Example.

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

Read Also: AngularJS Filter Change Date Format in Controller Example
<?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....

Tags :
Previous

How to Use If Condition in Laravel Select Query?
Next

Stripe Payment Gateway Integration in Laravel 5.8

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares