July 2, 2018
AngularJS Searching Sorting Pagination with DataTable using PHP And MySQL
AngularJS Searching Sorting Pagination with DataTable using PHP And MySQL
In this Post We Will Explain About is AngularJS Searching Sorting Pagination with DataTable 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 Datatable Pagination, Sorting and Search – Server SideExample
In this post we will show you Best way to implement Pagination, Searching and Sorting of Data Table using AngularJS, hear for CRUD, Paging, Sorting, Searching with AngularJS in MVCwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
live_angular_datatable.sql
Table structure for table `client_list` as well as Indexes for table `client_list`
CREATE TABLE `client_list` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `client_gen` varchar(10) NOT NULL, `client_age` varchar(15) NOT NULL, `email` varchar(255) NOT NULL, `client_phone` varchar(15) NOT NULL, `comapny_org` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; Indexes for table `client_list` ------------------------------ ALTER TABLE `client_list` ADD PRIMARY KEY (`id`);
index.php
<!doctype html>
<html>
<head>
<title>live24u | AngularJS Sorting, Searching and Pagination of Data Table using PHP, MySQL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="liveApp" ng-controller="controller">
<div class="container">
<hr/>
<h2 align="center">Step By step AngularJS Searching Sorting and Pagination of Data Table using PHP and MySQL Created By infinityknow.com</a></h2>
<hr/>
<div class="row">
<div class="col-md-2 pull-left">
<label>Live PageSize:</label>
<select ng-model="total_limit" class="form-control">
<option value="">10</option>
<option value="">20</option>
<option value="">50</option>
<option value="">100</option>
</select>
</div>
<div class="col-md-6 pull-right">
<label>Search:</label>
<input type="text" ng-model="search" ng-change="filter()" placeholder="Please Search Client" class="form-control" />
</div>
</div>
<hr/>
<!-- All list of client data list-->
<div class="row">
<div class="col-md-12" ng-show="filter_data > 0">
<table class="table">
<thead>
<th>CLient Name<a ng-click="client_sort_data('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>CLient Gender<a ng-click="client_sort_data('client_gen');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>CLient Age<a ng-click="client_sort_data('client_age');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>CLient Email<a ng-click="client_sort_data('email');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>CLient Phone<a ng-click="client_sort_data('client_phone');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>CLient Organization<a ng-click="client_sort_data('comapny_org');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="cdata in client_search = (file | filter:search | orderBy : base :reverse) | beginning_data:(live_grid_data-1)*total_limit | limitTo:total_limit">
<td>{{cdata.name}}</td>
<td>{{cdata.client_gen}}</td>
<td>{{cdata.client_age}}</td>
<td>{{cdata.email}}</td>
<td>{{cdata.client_phone}}</td>
<td>{{cdata.comapny_org}}</td>
</tr>
</tbody>
</table>
</div>
<!-- Show message if no found any data records -->
<div class="col-md-12" ng-show="filter_data == 0">
<div class="col-md-12">
<h4>No records found..</h4>
</div>
</div>
<!-- Show pagination data records -->
<div class="col-md-12">
<div class="col-md-6 pull-left">
<h5>Showing {{ client_search.length }} of {{ total_users}} entries</h5>
</div>
<div class="col-md-6" ng-show="filter_data > 0">
<div pagination="" page="live_grid_data" on-select-page="pos_page(page)" boundary-links="true" total-items="filter_data" items-per-page="total_limit" class="pagination-mdall pull-right" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Include External Libs -->
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls.min.js"></script>
<script src="liveapp.js"></script>
</body>
</html>
client_fetch.php
<?php
$conn = new mysqli('localhost', 'root', '', 'live_angular_datatable');
$live_query = "select distinct name, client_gen, client_age, email, client_phone, comapny_org from client_list order by id";
$sql_result = $conn->query($live_query) or die($conn->error . __LINE__);
$fetch_data = array();
if ($sql_result->num_rows > 0) {
while ($data_row = $sql_result->fetch_assoc()) {
$fetch_data[] = $data_row;
}
}
$sql_resdata = json_encode($fetch_data);
echo $sql_resdata;
?>
liveapp.js
var liveApp = angular.module('liveApp', ['ui.bootstrap']);
liveApp.filter('beginning_data', function() {
return function(input, begin) {
if (input) {
begin = +begin;
return input.slice(begin);
}
return [];
}
});
liveApp.controller('controller', function($scope, $http, $timeout) {
$http.get('client_fetch.php').success(function(client_list) {
$scope.file = client_list;
$scope.live_grid_data = 1;
$scope.total_limit = 10;
$scope.filter_data = $scope.file.length;
$scope.total_users = $scope.file.length;
});
$scope.pos_page = function(parm_pageno) {
$scope.live_grid_data = parm_pageno;
};
$scope.filter = function() {
$timeout(function() {
$scope.filter_data = $scope.client_search.length;
}, 20);
};
$scope.client_sort_data = function(base) {
$scope.base = base;
$scope.reverse = !$scope.reverse;
};
});
I hope you have Got What is PHP AngularJS CRUD with Search and Pagination Example 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.
Simple Angular hello world Application
vuejs Nested v-repeat Iterating Over Items directive
