AngularJS UI Grid Sorting Filtering Paging Grouping Example

AngularJS UI Grid Sorting Filtering Paging Grouping Example

what is AngularJS UI Grid?

AngularJS UI Grid Sorting Filtering Paging Grouping Example The ui-grid API simple in angularjs consists all of the core level ui.grid system means smart table documentation, plus officeal documentation for each of list the features that we can choose to add ,create,edit or remove to the grid system. Now add or simple create ui.grid system module new reference in angularjs simple application while new add remove or editable defining module like as shown list of futures following

There are the Following List of features available in UI Grid means Smart tabel using AngularJS.
#: Column Sorting datagrid either asc or desc or none
#: Column Filtering in grid system
#: Bind complex in grid system functionalities to all the tabel cell values
#: Ability to editable smart change header tag and cell all the content with custom tables templates
#: Grouping based smart tabel
#: Expandable all the Rows

READ :  Vuejs Facebook Login using PHP - vue facebook-login

Example

Include ui.grid Modules using AngularJS

var liveApp = angular.module("liveApp", ["ui.grid"]);

AngularJS UI Grid Example

 <!DOCTYPE html>
<html>
<head>
<title>
Developed By Pakainfo.com : Angularjs UI-Grid Example
</title>
<script src="angular.min.js"></script>
<script src="ui-grid.js"></script>
<link rel="stylesheet" href="ui-grid.css" type="text/css">
<script type="text/javascript">
var liveApp = angular.module("liveApp", ["ui.grid"]);
liveApp.controller("uigridCtrl", function ($scope) {
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' }
];
});
</script>
<style type="text/css">
.liveGriddata {
width: 625px;
height: 225px;
}
</style>
</head>
<body ng-app="liveApp">
<h2>Developed By Pakainfo.com : AngularJS UI Grid Example</h2>
<div ng-controller="liveCtrl">
<div ui-grid="{ data: clients }" class="liveGriddata"></div>
</div>
</body>
</html>
 

Syntax of AngularJS UI Grid Sorting

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address', enableSorting: false }
]
};

Example

AngularJS UI Grid Sorting Example

<html>
<head>
<title>
Developed By Pakainfo.com : Angularjs UI-Grid Sorting Example
</title>
<script src="angular.min.js"></script>
<script src="ui-grid.js"></script>
<link rel="stylesheet" href="ui-grid.css" type="text/css">
<script type="text/javascript">
var liveApp = angular.module("liveApp", ["ui.grid"]);
liveApp.controller("liveCtrl", function ($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address', enableSorting: false }
],
onRegisterApi: function (gridApi) {
$scope.mytableApi = gridApi;
}
};
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' }
];
$scope.gridOptions.data = $scope.clients;
});
</script>
<style type="text/css">
.liveGriddata {
width: 625px;
height: 240px;
}
</style>
</head>
<body ng-app="liveApp">
<h2>Developed By Pakainfo.com : AngularJS UI Grid Sorting Example</h2>
<div ng-controller="liveCtrl">
<div ui-grid="gridOptions" class="liveGriddata"></div>
</div>
</body>
</html>
 

AngularJS UI Grid Filtering Example

<html>
<head>
<title>
Developed By Pakainfo.com : Angularjs UI-Grid Filtering Example
</title>
<script src="angular.min.js"></script>
<script src="ui-grid.js"></script>
<link rel="stylesheet" href="ui-grid.css" type="text/css">
<script type="text/javascript">
var liveApp = angular.module("myliveApp", ["ui.grid"]);
liveApp.controller("liveCtrl", function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address', enableFiltering: false }
],
onRegisterApi: function (gridApi) {
$scope.mytableApi = gridApi;
}
};
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' }
];
$scope.gridOptions.data = $scope.clients;
});
</script>
<style type="text/css">
.liveGriddata {
width: 625px;
height: 240px;
}
</style>
</head>
<body ng-app="myliveApp">
<h2>Developed By Pakainfo.com AngularJS UI Grid Fitering Example</h2>
<div ng-controller="liveCtrl">
<div ui-grid="gridOptions" class="liveGriddata"></div>
</div>
</body>
</html>
 

AngularJS UI Grid Paging / Pagination Example

<html>
<head>
<title>
Developed By Pakainfo.com Angularjs UI-Grid Paging Example
</title>
<script src="angular.min.js"></script>
<script src="ui-grid.js"></script>
<link rel="stylesheet" href="ui-grid.css" type="text/css">
<script type="text/javascript">
var liveApp = angular.module("myliveApp", ["ui.grid", "ui.grid.pagination"]);
liveApp.controller("liveCtrl", function ($scope) {
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 5,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address' }
],
onRegisterApi: function (gridApi) {
$scope.mytableApi = gridApi;
}
};
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' },
{ clientname: "Siva Prasad", clientage: 38, address: 'gondal' },
{ clientname: "Sudheer Rayana", clientage: 25, address: 'Kakinada' },
{ clientname: "Honey Yemineni", clientage: 7, address: 'gondal' },
{ clientname: "Mahendra Kakadiya", clientage: 22, address: 'Vijayawada' },
{ clientname: "Mahesh Kakadiya", clientage: 23, address: 'California' },
{ clientname: "Nagaraju Kakadiya", clientage: 34, address: 'Atlanta' },
{ clientname: "Gopi Krishna", clientage: 35, address: 'Repalle' },
{ clientname: "Sudheer Uppala", clientage: 21, address: 'Guntur' },
{ clientname: "Sushmita", clientage: 27, address: 'diwan' }
];
$scope.gridOptions.data = $scope.clients;
});
</script>
<style type="text/css">
.liveGriddata {
width: 625px;
height: 240px;
}
</style>
</head>
<body ng-app="myliveApp">
<h2>Developed By Pakainfo.com : - AngularJS UI Grid Paging Example</h2>
<div ng-controller="liveCtrl">
<div ui-grid="gridOptions" ui-grid-paginationclass="liveGriddata"></div>
</div>
</body>
</html>

Example

READ :  Angularjs Remove Table Row with Apply ngClassEven NgClassOdd

Add a Comment

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