onlinecode

Angularjs PHP MySQL Pagination Example

onlinecode

Angularjs PHP MySQL Pagination Example

In this post we will give you information about Angularjs PHP MySQL Pagination Example. Hear we will give you detail about Angularjs PHP MySQL Pagination ExampleAnd how to use it also give you demo for it if it is necessary.

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.

See also  How to get filename from path in PHP?

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  ng-app="myApp" ng-controller="paginateController">
   <h3 align="center">Angularjs PHP MySQL Pagination Example - ItSolutionStuff.com</h3>
   <div >
        <table >
            <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>

Also see: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

Also see:Angularjs filter change date format in controller
<?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….

Hope this code and post will helped you for implement Angularjs PHP MySQL Pagination Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version