SearchField.
The first code is the php code to generate json data..
<?php
//Change your connection parameter as per you database.
$conn=oci_connect('hr','hr','192.168.0.109/orcl.localdomain');
if(!$conn)
{
echo "Connection failed";
$err = oci_error();
trigger_error(htmlentities($err['message'], ENT_QUOTES), E_USER_ERROR);
}
//Change your sql code as per your tables in database
$stid = oci_parse($conn, "SELECT emp_code, emp_name,decode(emp_grade,'S','Staff','Worker') emp_grade,to_char(nvl(date_of_birth,sysdate),'dd/mm/rrrr') dob FROM employee_master");
oci_execute($stid);
echo "[\n";
while (true) {
/* I have put the condition in if statement instead of while loop because I have to exclude the last comma when the last record is retrieved, after that it goes to the else statement where it generates one blank record */
if(($row = oci_fetch_array($stid, OCI_BOTH)) != false)
echo "{\"emp_code\":\"" . $row[0] . "\",\"emp_name\":\"" . $row[1] . "\",\"emp_grade\":\"" . $row[2] . "\",\"dob\":\"" . $row[3] . "\"},\n";
else
{
echo "{\"emp_code\":\"" . $row[0] . "\",\"emp_name\":\"" . $row[1] . "\",\"emp_grade\":\"" . $row[2] . "\",\"dob\":\"" . $row[3] . "\"}\n]";
break;
}
}
oci_free_statement($stid);
oci_close($conn);
?>
The next one is the html file which uses Angular JS which not only retrieve data from the json file but also uses ng-repeat to generate it into a table which can also be filtered as well as sorted columnwise.
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular.js example</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp=angular.module('myApp',[]);
angular.module('myApp',[])
.controller('angController',function($scope,$http) {
$http.get("ora_export_json.php")
.success(function($response) {
$scope.allinfo = $response;
});
});
</script>
</head>
<body ng-controller="angController">
Search : <input type=text ng-model="SearchField" />
<table border=1>
<tr>
<th><a href="" ng-click="sortField = 'emp_code'">Emp Code</a></th>
<th><a href="" ng-click="sortField = 'emp_name'">Emp Name</th>
<th><a href="" ng-click="sortField = 'emp_grade'">Emp Grade</a></th>
<th><a href="" ng-click="sortField = 'dob'">Date of Birth</th>
</tr>
<tr ng-repeat="perinfo in allinfo | filter:SearchField | orderBy:sortField">
<td>{{perinfo.emp_code}}</td>
<td>{{perinfo.emp_name}}</td>
<td>{{perinfo.emp_grade}}</td>
<td>{{perinfo.dob}}</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment