Angular UI Grid Advance Smart Table PHP MySQLi
Today, We want to share with you Angular UI Grid Advance Smart Table PHP MySQLi.In this post we will show you AngularJS UI Grid Example – step by step with example, hear for angularjs smart table server side pagination we will give you demo and example for implement.
In this post, we will learn about Add table row dynamically angular js download with an example.
There are list of Following the features available in AngularJS UI Grid.
1st : IN AngularJS UI Grid,Simple Column Sorting select either ascding or descding or none functionalities
2nd : IN AngularJS UI Grid,all Column Filtering
3rd : IN AngularJS UI Grid,data Bind complex all functionalities to (row)cell data values
4th : IN AngularJS UI Grid,all Ability to change all table header and row content with data-custom templates used
5th : IN AngularJS UI Grid,List og Grouping
6th : IN AngularJS UI Grid,Basic Expandable Rows
All list of Standard Features in AngularJS UI Grid
*) Sorting in AngularJS UI Grid
*) Filtering in AngularJS UI Grid
*) User interaction in AngularJS UI Grid
*) e2e testing integration in AngularJS UI Grid
All list of Advanced Features in AngularJS UI Grid
#]:- Virtualization in AngularJS UI Grid
#]:- Column pinning in AngularJS UI Grid
#]:- Grouping in AngularJS UI Grid
#]:- Edit in place in AngularJS UI Grid
#]:- Expandable rows in AngularJS UI Grid
#]:- International-isation in AngularJS UI Grid
include External Script using Angularjs ui-grid
[php]
http://yourapplicationfolder/1.4.8/angular.min.js
http://yourapplicationfolder/ui-grid.js
[/php]
index.html
[php]
AngularJS UI Grid Fitering Example
[php]
Javascript
[php]
var gridapp = angular.module(“demouigridAppex”, [“ui.grid”]);
gridapp.controller(“demouigridCtrlexample”, function ($scope) {
$scope.nggridOptionsdemo = {
enableFiltering: true,
columnDefs: [
{ field: ‘salesusername’,enableFiltering: true },
{ field: ‘userage’,enableFiltering: true },
{ field: ‘deliverylocation’, enableFiltering: true }
],
onRegisterApi: function (demogridApiexample) {
$scope.grid1Api = demogridApiexample;
}};
$scope.salesuserslist = [
{ salesusername: “Madhav Sai”, userage: 10, deliverylocation: ‘surat’ },
{ salesusername: “Suresh Dasari”, userage: 30, deliverylocation: ‘India’ },
{ salesusername: “Rohini Alavala”, userage: 29, deliverylocation: ‘Rajkot’ },
{ salesusername: “Praveen Kumar”, userage: 25, deliverylocation: ‘Kalkata’ },
{ salesusername: “Sateesh Chandra”, userage: 27, deliverylocation: ‘Kalavad’ },
{ salesusername: “Madhav Sai”, userage: 45, deliverylocation: ‘Surat’ },
{ salesusername: “Suresh Dasari”, userage: 38, deliverylocation: ‘Chennai’ },
{ salesusername: “Rohini Alavala”, userage: 74, deliverylocation: ‘Morbi’ },
{ salesusername: “Praveen Kumar”, userage: 29, deliverylocation: ‘Bangalore’ },
{ salesusername: “Sateesh Chandra”, userage: 29, deliverylocation: ‘Valsad’ }
];
$scope.nggridOptionsdemo.data = $scope.salesuserslist;
});
[php]
CSS
[php]
.demomyGrid {
width: 578px;
height: 248px;
}
[/php]
Example : DEMO
http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview
Download Source code :