AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL

Hi, friends in this post I show you how to do AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL. AngularJS Data table module helps to create attractive grid listing in your angularJS web application using angularJS directive. The main advantage of AngularJS Data-table is open source and light weighted. Grid view is a really important web part in the modern world. Sorting, searching, pagination is not a simple job in HTML tables.

In primary initialization, data table provides sorting and immediate searching by loading complete data records at once. It can be a display issue fetching a huge amount of data from MySQL server. It will be helpful if you integrate server-side sorting, searching and pagination so we can break huge amount data in the part, So performance will improve extremely.



<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SoftAOX | AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL</title>
<link href="" rel="stylesheet">
<div ng-app="myApp" ng-controller="controller">
<div class="container">
<h3 align="center">AngularJS Sorting, Searching and Pagination of Data Table using PHP & MySQL</a></h3>
<div class="row">
<div class="col-sm-2 pull-left">
<select ng-model="data_limit" class="form-control">
<div class="col-sm-6 pull-right">
<input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
<div class="row">
<div class="col-md-12" ng-show="filter_data > 0">
<table class="table table-striped table-bordered">
<th>Name&nbsp;<a ng-click="sort_with('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Gender&nbsp;<a ng-click="sort_with('gender');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Age&nbsp;<a ng-click="sort_with('age');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Email&nbsp;<a ng-click="sort_with('email');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Phone&nbsp;<a ng-click="sort_with('phone');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Organization&nbsp;<a ng-click="sort_with('organization');"><i class="glyphicon glyphicon-sort"></i></a></th>
<tr ng-repeat="data in searched = (file | filter:search | orderBy : base :reverse) | beginning_data:(current_grid-1)*data_limit | limitTo:data_limit">
<div class="col-md-12" ng-show="filter_data == 0">
<div class="col-md-12">
<h4>No records found..</h4>
<div class="col-md-12">
<div class="col-md-6 pull-left">
<h5>Showing {{ searched.length }} of {{ entire_user}} entries</h5>
<div class="col-md-6" ng-show="filter_data > 0">
<div pagination="" page="current_grid" on-select-page="page_position(page)" boundary-links="true" total-items="filter_data" items-per-page="data_limit" class="pagination-small pull-right" previous-text="&laquo;" next-text="&raquo;"></div>
<script src=""></script>
<script src=""></script>
<script src="myapp.js"></script>

var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('beginning_data', function() {
return function(input, begin) {
if (input) {
begin = +begin;
return input.slice(begin);
return [];
app.controller('controller', function($scope, $http, $timeout) {
$http.get('fetch.php').success(function(user_data) {
$scope.file = user_data;
$scope.current_grid = 1;
$scope.data_limit = 10;
$scope.filter_data = $scope.file.length;
$scope.entire_user = $scope.file.length;
$scope.page_position = function(page_number) {
$scope.current_grid = page_number;
$scope.filter = function() {
$timeout(function() {
$scope.filter_data = $scope.searched.length;
}, 20);
$scope.sort_with = function(base) {
$scope.base = base;
$scope.reverse = !$scope.reverse;

$conn  = new mysqli('localhost', 'root', '', 'angularjs_datatable');
$query = "select distinct name, gender, age, email, phone, organization from user_data order by id";
$result = $conn->query($query) or die($conn->error . __LINE__);
$fetch_data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$fetch_data[] = $row;
$jResponse = json_encode($fetch_data);
echo $jResponse;

Was this article helpful?

Yes No

How can we improve it?


We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

1 Comment

Leave a Reply

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