Home » Angular DataTable Pagination Searching Sorting in PHP

Angular DataTable Pagination Searching Sorting in PHP

Today, We want to share with you Angular DataTable Pagination Searching Sorting in PHP MySQLi.In this post we will show you AngularJS Datatable Pagination, Sorting and Searching Using Ajax, hear for Pagination Searching and Sorting of data table using Angularjs PHP MySQLi we will give you demo and example for implement.In this post, we will learn about Angular DataTable server side sorting,pagination and searching using PHP and MySQLi with an example.

Angular DataTable Pagination Searching Sorting in PHP MySQLi

There are the Following The simple About Angular DataTable Pagination Searching Sorting in PHP MySQLi Full Information With Example and source code.

As I will cover this Post with live Working example to develop angular – datatable [Pagination, Sorting in Angular], so the some major files and Directory structures for this example is following below.

  • index.php

Step 1: Make MySQL Database table

CREATE TABLE IF NOT EXISTS `members` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `member_pos` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `member_area` text COLLATE utf8_unicode_ci NOT NULL, `member_details` text COLLATE utf8_unicode_ci NOT NULL, `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=537

Step 2: Make HTML interFace

index.php

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.

<!doctype html>
<html>
<head>
    <title>Angular DataTable Pagination Searching Sorting in PHP MySQLi - pakainfo.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
    <div ng-app="pakainfoApp" ng-controller="controller">
        <div class="container">
            <hr/>
            <h2 align="center">Angular DataTable Pagination Searching Sorting in PHP MySQLi - pakainfo.com</a></h2>
            <hr/>
            <div class="row">
                <div class="col-md-6 pull-right">
                    <label>Search:</label>
                    <input type="text" ng-model="search" ng-change="filter()" placeholder="Please Enter Keyword and Search" class="form-control" />
                </div>
            </div>
            <hr/>
            <!-- All list of member data list-->
            <div class="row">
                <div class="col-md-12" ng-show="preview_data > 0">
                    <table class="table">
                        <thead>
                            <th>Name<a ng-click="member_sort('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>Slug<a ng-click="member_sort('member_pos');"><i class="glyphicon glyphicon-sort"></i></a></th>
                        </thead>
                        <tbody>
                            <tr dir-paginate="mdata in member_search = (file | filter:search | orderBy : base :reverse | itemsPerPage:10)">
                                <td>{{mdata.member_pos}}</td>
                                <td>{{mdata.name}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Show message if no found any data Members -->
                <div class="col-md-12" ng-show="preview_data == 0">
                    <div class="col-md-12">
                        <h4>No Members found..</h4>
                    </div>
                </div>
                <!-- Show member pagination data Members -->
                <div class="col-md-12">
                    <div class="col-md-6" ng-show="preview_data > 0">
                        <dir-pagination-controls
                           max-size="5"
                           direction-links="true"
                           boundary-links="true" >
                        </dir-pagination-controls>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Include Angularjs External Libs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script src="dirPagination.js"></script>
    <script src="pakainfoapp.js"></script>
</body>
</html>

Step 3: Make JavaScript file

Create pakainfoapp.js file

var pakainfoApp = angular.module('pakainfoApp', ['ui.bootstrap', 'angularUtils.directives.dirPagination']);
pakainfoApp.filter('flagning_data', function() {
    return function(val, flag) {
        if (val) {
            flag = +flag;
            return val.slice(flag);
        }
        return [];
    }
});
pakainfoApp.controller('controller', function($scope, $http, $timeout) {
    $http.get('ajax_fetch.php').then(successCallback, errorCallback);
    function successCallback(results){
        //angularjs controller success code
        $scope.file = results.data;
        $scope.gridData = 1;
        $scope.total_limit = 10;
        $scope.preview_data = $scope.file.length;
        console.log($scope.file.length);
        $scope.total_users = $scope.file.length;
    }
    function errorCallback(error){
        //error code
    }
    $scope.pos_page = function(parm_pageno) {
        console.log(parm_pageno);
        $scope.gridData = parm_pageno;
    };
    $scope.filter = function() {
        $timeout(function() {
            $scope.preview_data = $scope.member_search.length;
        }, 20);
    };
    $scope.member_sort = function(base) {
        $scope.base = base;
        $scope.reverse = !$scope.reverse;
    };
});

Step 4: Make Server Side Response

Create ajax_fetch.php file

<?php
$db_conn  = new mysqli('localhost', 'root', 'atmiya25', 'pakainfo12365');
$sqlQuery = "select member_pos, name from members order by id";
$data_res = $db_conn->query($sqlQuery) or die($db_conn->error . __LINE__);
$getData = [];
if ($data_res->num_rows > 0) {
    while ($myrow = $data_res->fetch_assoc()) {
        $getData[] = $myrow;
    }
}
$response = json_encode($getData);
echo $response;
?>

Angular DataTable Pagination Searching Sorting in PHP MySQLi – Output

Angular DataTable Pagination Searching Sorting in PHP MySQLi
Angular DataTable Pagination Searching Sorting in PHP MySQLi
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular DataTable Pagination Searching Sorting in PHP MySQLi.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  AngularJS Live Search Box using PHP MySqli

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Image pixelate Implementation pixel by pixel
  2. Read Also:  List of all WordPress WooCommerce hooks
  3. Read Also:  Multiple Controllers on Page using Angular Example
  4. Read Also:  Angular 8 Material Table Filter Sorting Paging
  5. Read Also:  VueJS setTimeout() Function Examples
  6. Read Also:  Same Scope Variable in Multiple Controllers using Angular Example
  7. Read Also:  Laravel 6 Bootstrap Toggle Switch With Ajax Update To Mysql
  8. Read Also:  AngularJS Fancybox Popup Simple Example
  9. Read Also:  jQuery Ajax File Upload Progress Bar percentage in PHP
  10. Read Also:  IMPLODE() AND EXPLODE() FUNCTION IN PHP

Leave a Comment

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