AngularJS datagrid paging sorting filter using PHP and MySQL

In this Post We Will Explain About is AngularJS datagrid paging sorting filter using PHP and MySQL With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS datagrid paging, sorting, filter using PHP and MySQL PHP

In this post we will show you Best way to implement Datatable Pagination, Sorting and Search – Server Side PHP-MySQL, hear for How to Angular JS Grid With Paging,Sorting,Filtering with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Table structure for table `students`

CREATE TABLE IF NOT EXISTS `students` (
  `studenumber` int(11) NOT NULL,
  `studentName` varchar(50) NOT NULL,
  `studLastName` varchar(50) NOT NULL,
  `studFirstName` varchar(50) NOT NULL,
  `studaddressLine1` varchar(50) NOT NULL,
  `addressLine2` varchar(50) DEFAULT NULL,
  `studCity` varchar(50) NOT NULL,
  `studState` varchar(50) DEFAULT NULL,
  `postalCode` varchar(15) DEFAULT NULL,
  `studCountry` varchar(50) NOT NULL,
  `studRepEmpNumber` int(11) DEFAULT NULL,
  `creditLimit` double DEFAULT NULL,
  PRIMARY KEY (`studenumber`),
  KEY `studRepEmpNumber` (`studRepEmpNumber`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

index.html

<!DOCTYPE html>
<html ng-app="liveApp" ng-app lang="en">
<head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    ul>li, a{cursor: pointer;}
    </style>
    <title>Simple Angularjs Datagrid with searching, sorting and paging using AngularJS Example, PHP, MySQL</title>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
    <div class="container" id="navbar-container">
    <div class="navbar-header">
        <a href="https://infinityknow.com" class="navbar-brand">
            <small>
                <i class="fa-fonts fa-fonts-log-out"></i>
                liveSourcecode / AngularJS Demos 
            </small>
        </a>
        
    </div>
    <div class="navbar-header pull-right" role="navigation">
        <a href="https://infinityknow.com/php/" class="btn btn-sm btn-danger nav-button-margin"> <i class="fa-fonts fa-fonts-book"></i> Tutorial Link</a>
        <a href="https://infinityknow.com/php/" class="btn btn-sm btn-warning nav-button-margin"> <i class="fa-fonts fa-fonts-download"></i> Download Angularjs</a>
    </div>
    </div>
</div>

<div ng-controller="liveCtrl">
<div class="container">
<br/>
<p><h4><a href="https://infinityknow.com/php/">Simple Datagrid with searching, sorting and Paginations using AngularJS + simple PHP with MySQL</a></h4></p>
<br/>
    <div class="row">
        <div class="col-md-2">PageSize:
            <select ng-model="LiveEntryLimit" class="form-control">
                <option>5</option>
                <option>10</option>
                <option>20</option>
                <option>50</option>
                <option>100</option>
            </select>
        </div>
        <div class="col-md-3">Filter:
            <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
        </div>
        <div class="col-md-4">
            <h5>Filtered {{ filtered.length }} of {{ totalItems}} total students</h5>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-12" ng-show="liveproducts > 0">
            <table class="table table-striped table-bordered">
            <thead>
            <th>Customer Name <a ng-click="data_sort_live('studentName');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            <th>Address <a ng-click="data_sort_live('studaddressLine1');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            <th>City <a ng-click="data_sort_live('studCity');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            <th>State <a ng-click="data_sort_live('studState');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            <th>Postal Code <a ng-click="data_sort_live('postalCode');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            <th>Country <a ng-click="data_sort_live('studCountry');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            <th>Credit Limit <a ng-click="data_sort_live('creditLimit');"><i class="fa-fonts fa-fonts-sort"></i></a></th>
            </thead>
            <tbody>
                <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(activePage-1)*LiveEntryLimit | limitTo:LiveEntryLimit">
                    <td>{{data.studentName}}</td>
                    <td>{{data.studaddressLine1}}</td>
                    <td>{{data.studCity}}</td>
                    <td>{{data.studState}}</td>
                    <td>{{data.postalCode}}</td>
                    <td>{{data.studCountry}}</td>
                    <td>{{data.creditLimit}}</td>
                </tr>
            </tbody>
            </table>
        </div>
        <div class="col-md-12" ng-show="liveproducts == 0">
            <div class="col-md-12">
                <h4>No students found</h4>
            </div>
        </div>
        <div class="col-md-12" ng-show="liveproducts > 0">    
            <div pagination="" page="activePage" on-select-page="setPage(page)" boundary-links="true" total-items="liveproducts" items-per-page="LiveEntryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
            
            
        </div>
    </div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/app.js"></script>         
    </body>
</html>

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

app/app.js

var app = angular.module('liveApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.controller('liveCtrl', function ($scope, $http, $timeout) {
    $http.get('ajax/getCustomers.php').success(function(data){
        $scope.list = data;
        $scope.activePage = 1; 
        $scope.LiveEntryLimit = 5; 
        $scope.liveproducts = $scope.list.length;   
        $scope.totalItems = $scope.list.length;
    });
    $scope.setPage = function(pageNo) {
        $scope.activePage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.liveproducts = $scope.filtered.length;
        }, 10);
    };
    $scope.data_sort_live = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
});

config.php

<?php 
$DB_HOST = 'localhost';
$DB_USER = 'root';
$DB_PASS = '[email protected]';
$DB_NAME = 'livedata_grid';
$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
?>

getCustomers.php

<?php
include('../includes/config.php');

$query="select distinct c.studentName, c.studaddressLine1, c.studCity, c.studState, c.postalCode, c.studCountry, c.creditLimit from students c order by c.studenumber";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

$liveArray = array();
if($result->num_rows > 0) {
	while($row = $result->fetch_assoc()) {
		$liveArray[] = $row;	
	}
}
$json_response = json_encode($liveArray);

echo $json_response;
?>

Example

READ : Vuejs Nested v-for index and Nested v-repeat index Example

I hope you have Got Pagination, Searching and Sorting of Data Table using AngularJS And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.